IE 10のCSSフィルタグレースケールイメージ

Question

JavaScriptまたはSVGなしでIE 10でグレースケールイメージフィルタを動作させる方法はありますか？

私だけのWebKitとFirefoxで動作するIE 10

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+, Firefox on Android */ 
filter:gray; /* IE6-9 */ 
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
-moz-filter: grayscale(100%); 
-o-filter: grayscale(100%);} 

Answer 1

を除くすべてのブラウザで正常にこのアプローチを次のコードを使用してきました。 IEやOperaでは動作しません。 WebKitは現在、CSSフィルタをサポートする唯一のブラウザですが、FirefoxはHTML上のSVGフィルタをサポートしています。 OperaとIEはSVGフィルタをサポートしていますが、SVGコンテンツのみをサポートしています。

IE10ではこの機能を有効にする方法はありません。これは、従来のIEフィルタのサポートがなくなったためです。しかし、私はそれをお勧めしない方法があります。

あなたは頭の中で、次のmeta要素を使用してIE9標準モードを使用してレンダリングするためにIE10を設定することができます。

<meta http-equiv="X-UA-Compatible" content="IE=9"> 

これは、レガシーIEフィルター用背面のサポートを有効にします。しかし、IE10の最新の進歩がもはやサポートされなくなるIE9モードにIEを落とすという副作用があります。あなたの場合は、これらの新しい機能は現在必要ではない可能性がありますが、この道を行く場合、将来的にサイトを更新する際に注意する必要があります。

Answer 2

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

上記のリンクは> IE10と他のブラウザのために良いアイデアを与えます。

Answer 3

これはフェード効果

Code

Demo