IE10 を考慮してクロスブラウザー画像のグレースケールを実現するにはどうすればよいですか?

IE10 でのクロスブラウザー画像のグレースケールに関する考慮事項

Internet Explorer 9 以前のブラウザーは、DX フィルターを介してグレースケール フィルターをサポートしています。ただし、IE10 には DX フィルターがサポートされていないため、特有の課題があります。

IE10 グレースケール ソ​​リューション

IE10 で目的のグレースケール効果を実現するには、 SVGオーバーレイ。以下に例を示します。

<code class="css">img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
}</code>

追加リソース

• [CSS を使用したクロスブラウザー画像グレースケール](http://www.karlhorky.com/ 2012/06/cross-browser-image-grayscale-with-css.html)
• [IE10 の SVG フィルター効果](http://blogs.msdn.com/b/ie/archive/2011/) 10/14/svg-filter-effect-in-ie10.aspx)

以上がIE10 を考慮してクロスブラウザー画像のグレースケールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。