CSS を使用してマウスホバー時のグレースケール画像変換を実現し、IE および Firefox との互換性を確保するにはどうすればよいですか?

CSS を使用してマウス ホバー上の画像をグレースケールおよび再色化する

チャレンジ: 色付きのアイコンをグレースケールに変換して元に戻すマウスをホバーすると色が付き、IE と Firefox の両方との互換性が確保されます。

解決策:

1.純粋な CSS (1 つのカラー画像を使用):

このアプローチでは、CSS フィルターを利用して画像をグレースケールに変換します。 filter プロパティは、クラス greyscale.

CSS:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,"); /* Firefox 3.5+, IE10 */
  filter: gray;                           /* IE6-9 */
  -webkit-filter: grayscale(100%);      /* Chrome 19+ &amp; Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

2 の img 要素に適用されます。 CSS と SVG (インライン SVG を使用):

IE10 はインライン SVG をサポートし、よりクリーンなソリューションを可能にします。 SVG 画像は feColorMatrix 要素を使用してフィルタリングされ、彩度値を 0 に設定することでグレースケール効果が適用されます。

HTML:

<code class="html">&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 400 377&quot; width=&quot;400&quot; height=&quot;377&quot;&gt;
  &lt;defs&gt;
    &lt;filter id=&quot;filtersPicture&quot;&gt;
      &lt;feComposite result=&quot;inputTo_38&quot; in=&quot;SourceGraphic&quot; in2=&quot;SourceGraphic&quot; operator=&quot;arithmetic&quot; k1=&quot;0&quot; k2=&quot;1&quot; k3=&quot;0&quot; k4=&quot;0&quot; /&gt;
      &lt;feColorMatrix id=&quot;filter_38&quot; type=&quot;saturate&quot; values=&quot;0&quot; data-filterid=&quot;38&quot; /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;image filter=&quot;url(#filtersPicture)&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;400&quot; height=&quot;377&quot; xlink:href=&quot;image.jpg&quot; /&gt;
&lt;/svg&gt;</code>

以上がCSS を使用してマウスホバー時のグレースケール画像変換を実現し、IE および Firefox との互換性を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。