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

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