如何使用 CSS 创建在鼠标悬停时重新着色的灰度图像？-css教程-PHP中文网

如何使用 CSS 创建在鼠标悬停时重新着色的灰度图像？

DDD

发布： 2024-10-27 05:42:29

原创

336 人浏览过

How can I create a grayscale image that recolors on mouse-over using CSS?

使用 CSS 和 Amp 的图像灰度；鼠标悬停时重新着色

在这篇文章中，我们将探讨如何实现此效果并提供跨浏览器兼容性。

纯 CSS（仅使用一张彩色图像）

对于第一种方法，我们使用纯 CSS 和仅一个图像：

<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(&quot;#filtersPicture&quot;)" ... />
   </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中文网其他相关文章！