将图像转换为HTML / CSS中的灰度
有没有简单的方法来显示灰度的颜色位图只有HTML/CSS ？
它不需要与IE兼容（我想它不会） - 如果它适用于FF3和/或Sf3，那对我来说已经足够了。
我知道我可以用SVG和Canvas做到这一点，但是现在看起来像很多工作。
有没有一个真正的懒惰的人的方式来做到这一点？
对CSS过滤器的支持已经登陆到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="http://lorempixel.com/400/200/">继brillout.com的回答以及Roman Nurik的回答之后，放松了一些'没有SVG'的要求，您可以使用一个SVG文件和一些CSS来对Firefox中的图像进行去饱和处理。
你的SVG文件如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>
将它保存为resources.svg，可以从现在开始重新使用任何要更改为灰度的图像。
在您的CSS中，您可以使用Firefox特定的filter属性来引用过滤filter ：
.target {
filter: url(resources.svg#desaturate);
}
如果您喜欢，也可以添加MS专有的，将该类应用于要转换为灰度的任何图像（适用于Firefox> 3.5，IE8）。
编辑 ：这里有一篇很好的博客文章，描述了在SalmanPK的答案中使用新的CSS3 filter属性，与此处描述的SVG方法一致。 使用这种方法，你最终会得到如下结果：
img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}
更多浏览器支持信息。
对于Firefox你不需要创建一个filter.svg文件，你可以使用数据URI方案。
拿起第一个答案的CSS代码给出：
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#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请求。
链接地址: http://www.djcxy.com/p/67177.html