如何使用 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中文网其他相关文章！