是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
作为对其他人答案的补充，可以在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参考资料
其他回答
如果您或其他将来面临类似问题的人愿意使用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构建)，但作为概念的证明，它非常令人印象深刻。
根据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属性引用过滤器:
.target {
filter: url(resources.svg#desaturate);
}
如果你喜欢，也可以添加MS专有的，将该类应用到任何你想转换为灰度的图像(适用于Firefox >3.5, IE8)。
编辑:这里有一篇不错的博客文章，描述了在SalmanPK的答案中使用新的CSS3过滤器属性与这里描述的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请求。
试试这个jquery插件。虽然，这不是一个纯粹的HTML和CSS解决方案，但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度，以最适合您的使用。使用方法如下:
$("#myImageID").tancolor();
有一个互动演示。你可以摆弄它。
查看有关使用方法的文档，它非常简单。文档
