マウスオーバーで色を変更する CSS を使用してグレースケール画像を作成するにはどうすればよいですか?

CSS で画像のグレースケールを実現し、マウスオーバーで色を変更します

CSS で画像のグレースケールを実現し、マウスで色を変更できます-いくつかの方法を使用します。概要は次のとおりです:

純粋な CSS (単色の画像を使用)

CSS フィルターを使用して画像をグレースケールに変換し、マウスオーバー時の効果を削除します:

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

CSS と JavaScript の組み合わせ

グレースケール画像とカラー画像を作成し、マウスイン イベントとマウスアウト イベントで表示/非表示を切り替えます:

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

SVG フィルターの使用 (IE10 のみ)

フィルター付きのインライン SVG を利用して彩度効果を適用し、マウスオーバーで変更します:

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#grayscale)" ... />
</svg></code>

Saturate の値を調整することで、グレースケールのレベルを制御できます。この方法は IE10 以降でサポートされています。

以上がマウスオーバーで色を変更する CSS を使用してグレースケール画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。