在 HTML/CSS 中将图像转换为灰度 [英] Convert an image to grayscale in HTML/CSS

问题描述

是否有一种简单的方法可以仅使用 HTML/CSS 以灰度显示彩色位图?

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

它不需要与 IE 兼容(我想它不会)——如果它适用于 FF3 和/或 Sf3，那对我来说就足够了.

It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.

我知道我可以同时使用 SVG 和 Canvas，但是现在这似乎需要做很多工作.

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now.

有没有真正懒人的方法来做到这一点?

Is there a truly lazy person's way to do this?

推荐答案

Webkit 支持 CSS 过滤器.所以我们现在有了一个跨浏览器的解决方案.

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

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

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

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

Internet Explorer 10 怎么样?

您可以使用像 gray 这样的 polyfill.

You can use a polyfill like gray.

这篇关于在 HTML/CSS 中将图像转换为灰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！