Internet Explorer 10 で画像にグレースケール フィルターを適用する方法

Internet Explorer 10 のグレースケール フィルター

グレースケールを含む CSS フィルターは、Web 開発で画像を強化するために広く使用されています。ただし、テクノロジーの進歩に伴い、ブラウザごとにフィルターの実装方法が異なるため、互換性の問題が発生します。

Internet Explorer バージョン 9 以前では、DX フィルターを使用して CSS 経由でグレースケール フィルターを簡単に適用できました。ただし、このアプローチは Internet Explorer 10 では機能しなくなりました。

Internet Explorer 10 のソリューション

Internet Explorer 10 では、SVG フィルター効果が導入され、グレースケール変換を実現するための代替方法が提供されました。 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 コードは、ユーザーが画像の上にマウスを置くと、画像をグレースケールに変換します。フィルター プロパティは、SVG 画像をオーバーレイとして使用します。これには、画像の色をグレースケールに変換するフィルター効果が含まれています。

詳細情報

Internet Explorer 10 の SVG フィルター効果の詳細については、次のリソースを参照してください:

• [Internet Explorer 10 の SVG フィルター効果](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg- filter-Effects-in-ie10.aspx)
• [CSS を使用したクロスブラウザー画像グレースケール](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with- css.html)
• [簡略化された JSFiddle](http://jsfiddle.net/KatieK/qhU7d/2/)

以上がInternet Explorer 10 で画像にグレースケール フィルターを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。