如何使用 CSS 滤镜轻松将图像转换为灰度？

使用 CSS 滤镜将图像转换为灰度

在 Web 开发领域，将图像转换为灰度可能会带来挑战。涉及 SVG 或 Canvas 的传统方法可能非常耗时。然而，随着 CSS 滤镜的出现，一种更简单、跨浏览器的解决方案出现了。

跨浏览器灰度过滤

CSS 滤镜提供了一种便捷的修改方式元素的外观，包括图像。 grayscale() 过滤器允许您将图像转换为灰度，模仿删除颜色信息的效果。

要将灰度效果应用于图像，请使用以下 CSS 属性：

-webkit-filter: grayscale(1);
filter: grayscale(1);

示例代码

考虑以下 HTML代码：

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何使用 CSS 滤镜轻松将图像转换为灰度？" >

要以灰度显示图像，请添加 CSS 样式：

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Hover Override

禁用灰度效果悬停时，您可以指定不同的过滤器值：

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

这将恢复图像当鼠标悬停在其上时，将变为原始颜色。

浏览器兼容性

现代浏览器支持 CSS 过滤器，包括 Webkit、Edge 和 Firefox 35 。但对 IE6-9 的支持有限。

以上是如何使用 CSS 滤镜轻松将图像转换为灰度？的详细内容。更多信息请关注PHP中文网其他相关文章！