是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
在Internet Explorer中使用filter属性。
在webkit和Firefox中，目前还没有办法仅用CSS来降低图像的饱和度。 所以你需要使用画布或SVG作为客户端解决方案。
但我认为使用SVG更优雅。看看我的博客文章，SVG解决方案，同时适用于Firefox和webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
严格来说，因为SVG是HTML，所以解决方案是纯HTML +css:-)
其他回答
如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>，所以它应该可以工作。
所以我在谷歌上搜索了“canvas grayscale”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，似乎可以。
事实上，如果我记得正确地使用了一个专有的CSS属性，用IE更容易做到这一点。试试这个滤镜:灰色，来自http://www.ssi-developer.net/css/visual-filters.shtml
Ax的方法只是使图像透明，并在其后面有黑色背景。你肯定会说这是灰度图。
虽然您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。
对于那些在其他答案中询问被忽略的IE10+支持的人，请签出这段CSS:
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#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;
}
应用于此标记:
<!DOCTYPE HTML>
<html>
<head>
<title>Grayscaling in Internet Explorer 10+</title>
</head>
<body>
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
</html>
更多的演示，请查看IE测试驱动的CSS3图形部分和这个旧的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
今天又遇到了同样的问题。我最初使用SalmanPK解决方案，但发现FF和其他浏览器之间的效果不同。这是因为转换矩阵只对亮度有效，而不是像Chrome/IE中的滤镜那样对亮度有效。令我惊讶的是，我发现SVG中的另一种更简单的解决方案也适用于FF4+，并产生更好的结果:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
用css:
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
需要注意的是，IE10在标准兼容模式下不再支持“filter: gray:”，所以需要在头文件中切换兼容模式才能工作:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
也许这样能帮到你
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
w3schools.org
