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

CSS とアンプを使用した画像のグレースケール。マウスオーバーで色を変更します

この投稿では、この効果を実現し、ブラウザ間の互換性を提供する方法を検討します。

純粋な CSS (1 つの色付き画像のみを使用)

最初の方法では、純粋な CSS と 1 つの画像のみを使用します。

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

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

SVG を使用する

この方法では、インライン SVG を使用してグレースケール効果と別の画像を作成します。カラーバージョン:

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

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewbox="0 0 400 377" width="400" height="377">
  ...
  <image filter='url("#filtersPicture")' ...></image>
   </svg></code>

JavaScript

最後に、JavaScript を使用してホバー時に画像ソースを変更できます:

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

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

これらこのメソッドはブラウザ間の互換性を提供し、画像にグレースケール効果やホバー効果を簡単に追加できます。

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