是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
Webkit支持CSS过滤器。所以我们现在有了一个跨浏览器的解决方案。
img { 过滤器:灰色;/* ie6-9 */ -webkit-filter:灰度(1);/*谷歌Chrome, Safari 6+ & Opera 15+ */ 过滤器:灰度(1);/* Microsoft Edge和Firefox 35+ */ ｝ /*禁用悬停时的灰度*/ img:{徘徊 -webkit-filter:灰度(0); 过滤器:没有; ｝ < 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怎么样?
你可以用灰色填充。
其他回答
如果您或其他将来面临类似问题的人愿意使用PHP。 (我知道你说HTML/CSS，但也许你已经在后端使用PHP) 下面是一个PHP解决方案:
我从PHP GD库中获得了它，并添加了一些变量来自动化这个过程…
<?php
$img = @imagecreatefromgif("php.gif");
if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);
// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');
// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>
即使有CSS3或专有的-webkit-或-moz- CSS属性，看起来也不可能(目前)。
然而，我确实发现了去年6月在HTML上使用SVG过滤器的文章。目前在任何浏览器中都无法使用(演示版本暗示了一个自定义WebKit构建)，但作为概念的证明，它非常令人印象深刻。
作为对其他人答案的补充，可以在FF上降低图像的饱和度，而不会出现SVG矩阵的头痛问题:
<feColorMatrix type="saturate" values="$v" />
其中$v在0和1之间。相当于filter:grayscale(50%);。
生活例子:
.desaturate { filter: url("#desaturate"); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: "Helvetica"; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0.4"/> </filter> </svg> <figure> <figcaption>Original</figcaption> <img src="http://www.placecage.com/c/500/200"/> </figure> <figure> <figcaption>Half grayed</figcaption> <img class="desaturate" src="http://www.placecage.com/c/500/200"/> </figure>
MDN参考资料
更新:我把它做成了一个完整的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,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#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%);
}
对于那些在其他答案中询问被忽略的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
