0

この質問はすでに尋ねられていることは知っていますが、それに対する直接的な答えを見つけることができませんでした

スムーズに色に移行するマウスホバーを除いて、グレースケールで表示する必要があるページにいくつかの画像を表示しようとしています。IE、Chrome、Firefox では問題なく動作するようにしましたが、Safari 5.x では動作しません。この問題は、Mac 用の Safari 5 と Windows 用の Safari にあります。

次のコードを使用しています

img{
    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+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */

}
4

1 に答える 1

1

現時点では、CSS3 フィルターをサポートしているブラウザーはほとんどありません。

これを試すことができます https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

これを見てください http://caniuse.com/css-filters

于 2013-07-22T10:27:02.417 に答える