image - 在 HTML/CSS 中将图像转换为灰度

Question

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

它不需要与 IE 兼容(我想它不会)——如果它在 FF3 和/或 Sf3 中工作，这对我来说就足够了。

我知道我可以同时使用 SVG 和 Canvas 来做到这一点，但现在看起来工作量很大。

有真正懒人的方法吗？

Answer 1

Support for CSS filters has landed in Webkit.所以我们现在有一个跨浏览器的解决方案。

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 .