如何仅使用 HTML 和 CSS 轻松将图像转换为灰度？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-12-15 11:57:11

原创

302 人浏览过

How Can I Easily Convert Images to Grayscale Using Only HTML and CSS?

将图像转换为 HTML/CSS 中的灰度：一个简单的解决方案

在 CSS 的帮助下可以以灰度显示彩色位图过滤器。这种方法提供了跨浏览器解决方案，并且实现起来相对简单。

要使用 CSS 对图像应用灰度效果，只需将以下代码添加到样式表中：

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

登录后复制

此代码会将页面上的所有图像转换为灰度。或者，您可以定位特定图像：

#my-image {
  /* CSS styles */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

登录后复制

要禁用悬停时的灰度效果，请添加以下代码：

#my-image:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

登录后复制

使用这个简单的 CSS 解决方案，您可以轻松显示图像灰度，无需 SVG 或 Canvas 等复杂技术。

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