如何仅使用 HTML 和 CSS 将彩色图像转换为灰度图像？

使用 HTML/CSS 将图像转换为灰度

此问题旨在探索一种仅以灰度显示彩色位图图像的轻松方法通过 HTML 和 CSS。目标是避免使用 SVG 或 Canvas 的复杂性，并找到兼容 Firefox 3 和 Safari 3 或更高版本的解决方案。

幸运的是，Webkit 中 CSS 过滤器的出现提供了跨浏览器的解决方案为了这个任务。以下代码片段说明了如何实现所需的灰度效果：

<img src="image.png">

filter 属性受 Internet Explorer 6-9 和 Microsoft Edge 支持，而 -webkit-filter 属性受 Google Chrome 支持， Safari 6 和 Opera 15 .

要禁用悬停时的灰度效果，可以使用以下 CSS 规则应用：

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

这个简单的解决方案允许将彩色图像转换为 HTML/CSS 中的灰度图像，而不需要额外的 SVG 或 Canvas 开销。

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