我可以仅使用 HTML 和 CSS 将图像转换为灰度吗？

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

问题：

有没有一个简单的方法仅使用 HTML/CSS 以灰度显示彩色位图的方法，不会产生 SVG 或Canvas？

答案：

随着 Webkit 中 CSS 过滤器的出现，跨浏览器解决方案应运而生。下面是启用灰度转换的代码：

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

为了说明这一点，这里有一个示例 HTML 代码：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

将此技术应用于图像会将其转换为灰度，提供简单有效的单色图像显示解决方案。

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