在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?

推荐答案

对CSS过滤器的支持已停放在Webkit中。所以我们现在有一个跨浏览器解决方案。

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

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

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

<img src="http://lorempixel.com/400/200/">

Internet Explorer 10有何影响？

polyfill如灰色。

You can use a polyfill like gray.

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