是否有一个简单的方法来显示一个彩色位图的灰度与只是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怎么样?
你可以用灰色填充。
其他回答
作为对其他人答案的补充，可以在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参考资料
如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>，所以它应该可以工作。
所以我在谷歌上搜索了“canvas grayscale”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，似乎可以。
用CSS实现灰度最简单的方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
该属性仍然不完全支持，并且仍然需要-webkit-filter属性来支持所有浏览器。
如果您或其他将来面临类似问题的人愿意使用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);
?>
对于那些在其他答案中询问被忽略的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
