html设置图像灰度,在HTML / CSS中将图像转换为灰度

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

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

我知道我可以用SVG和Canvas来做，但现在看起来很多工作。

有一个真正懒惰的人这样做的方法吗？

#1楼

从当前版本19.0.1084.46添加了对webkit中的本机CSS过滤器的支持

所以-webkit-filter：grayscale(1)可以工作，比webkit的SVG方法更容易...

#2楼

更新：我把它变成了一个完整的GitHub仓库，包括用于IE10和IE11的JavaScript polyfill： https ： //github.com/karlhorky/gray

我最初使用SalmanPK的答案 ，但随后创建了下面的变体以消除SVG文件所需的额外HTTP请求。 内联SVG适用于Firefox 10及更高版本，低于10的版本不再占全球浏览器市场的1％。

从那以后，我一直在这篇博文上更新解决方案，增加了对淡入淡出的支持，对SVG的IE 10/11支持以及演示中的部分灰度。

img.grayscale {

/* Firefox 10+, Firefox on Android */

filter: url("data:image/svg+xml;utf8,#grayscale");

/* IE 6-9 */

filter: gray;

/* Chrome 19+, Safari 6+, Safari 6+ iOS */

-webkit-filter: grayscale(100%);

}

img.grayscale.disabled {

filter: none;

-webkit-filter: grayscale(0%);

}

#3楼

对于Firefox，您不需要创建filter.svg文件，您可以使用数据URI方案 。

拿起第一个答案的css代码给出：

filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */

filter: grayscale(100%); /* Current draft standard */

-webkit-filter: grayscale(100%); /* New WebKit */

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: gray; /* IE6+ */

请注意用文件编码替换“utf-8”字符串。

此方法应该比另一个更快，因为浏览器不需要执行第二个HTTP请求。

#4楼

对于那些在其他答案中询问被忽略的IE10 +支持的人，请查看这篇CSS：

img.grayscale:hover {

filter: url("data:image/svg+xml;utf8,#grayscale");

}

svg {

background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);

}

svg image:hover {

opacity: 0;

}

应用于此标记：

Grayscaling in Internet Explorer 10+

IE10 with inline SVG

#5楼

是旧浏览器的替代方案可能是使用伪元素或内联标记生成的掩码。

绝对定位悬停img(或不需要点击或选择的文本区域)可以通过rgba()或translucide png密切模仿色标的影响。

它不会给出单一的色标，但会使色彩超出范围。

通过伪元素测试10种不同颜色的代码笔，最后是灰色。 http://codepen.io/gcyrillus/pen/nqpDd (重新加载以切换到另一个图像)