ホームページ > ウェブフロントエンド > CSSチュートリアル > Internet Explorer 10 で画像にグレースケール フィルターを適用するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-10-28 06:19:30
オリジナル
690 人が閲覧しました

How Can I Apply a Grayscale Filter to Images in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート