是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
即使有CSS3或专有的-webkit-或-moz- CSS属性，看起来也不可能(目前)。
然而，我确实发现了去年6月在HTML上使用SVG过滤器的文章。目前在任何浏览器中都无法使用(演示版本暗示了一个自定义WebKit构建)，但作为概念的证明，它非常令人印象深刻。
其他回答
你可以使用jFunc的一个函数——使用函数"jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
如果您或其他将来面临类似问题的人愿意使用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);
?>
试试这个jquery插件。虽然，这不是一个纯粹的HTML和CSS解决方案，但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度，以最适合您的使用。使用方法如下:
$("#myImageID").tancolor();
有一个互动演示。你可以摆弄它。
查看有关使用方法的文档，它非常简单。文档
一个糟糕但可行的解决方案是:使用Flash对象渲染图像，然后在Flash中为您提供所有可能的转换。
如果您的用户使用尖端浏览器，并且Firefox 3.5和Safari 4支持它(我不知道是否支持)，您可以调整图像的CSS颜色配置文件属性，将其设置为灰度ICC配置文件URL。但那有很多假设!
对于Firefox中的灰度百分比，请使用饱和滤镜(搜索'saturate')
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"
