Internet Explorer 10 で画像にグレースケール フィルターを適用するにはどうすればよいですか?

Internet Explorer 10 でのグレースケール フィルターの適用: 詳細ガイド

Internet Explorer 10 では、画像にグレースケール フィルターを適用する際に独特の課題が生じます。以前のバージョンの IE とは異なり、IE10 には DX フィルターとプレフィックス付きグレースケール フィルターがサポートされていません。ただし、SVG オーバーレイを利用して目的の効果を実現する回避策があります。

解決策: SVG オーバーレイ

Internet Explorer 10 でグレースケール フィルターを適用するには、次のことができます。次の CSS を使用します:

<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>

このコードでは、マウスオーバー時のフィルターを有効にするためにホバー状態が使用されます。フィルター プロパティは、グレースケール変換を指定する feColorMatrix 要素を含む SVG オーバーレイを指します。

使用例:

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

ブラウザ サポート:

SVG オーバーレイのアプローチは Internet Explorer 10 以降でサポートされています。

追加リソース:

• [クロスブラウザー] 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-Effects-in-ie10.aspx)

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