1

次のコードを変更して、すべてのブラウザでスムーズにフェード トランジションを行う方法を教えてもらえますか?

img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}

今、Firefoxでカラースケールを一気に変更しています、ありがとう

4

2 に答える 2

3

まあ、一部のブラウザが一部の機能をサポートし、一部の機能をサポートしていない「ブラウザ戦争」によると、これに対する純粋な CSS3 ソリューションはありません。ただし、最新のブラウザー (Chrome、Safari 4 以降、Firefox 11 以降?、Opera 12 以降?、IE 10 以降) では、CSS3 を使用できます。ここにいくつかのコードがあります：

img.grayscale {
    -webkit-transition: -webkit-filter .3s ease-in; /* chrome & safari */
    -moz-transition: filter .3s ease-in; /* firefox and other gecko-based */
    -ms-transition: filter .3s ease-in; /* ie 10+ */
    -o-transition: filter .3s ease-in; /* opera */
    transition: filter .3s ease-in; /* w3 (future standard) */
}

ただし、純粋に CSS を使用しないだけで、クロスブラウザーの救済策があります。

于 2012-12-01T20:21:29.367 に答える
0

現在、このクロスブラウザーを実行する最も簡単な方法は、画像の 2 つのコピー (1 つのグレースケール) を保持し、不透明度を移行することです。

同じテクニック (2 つの重ね合わせた画像 - 上部の画像をフェードアウト) を使用すると、上部と下部が同じ画像で、上部にすべてのブラウザー固有のフィルターがあるものを構築できます。

于 2013-02-28T15:23:32.177 に答える