是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
如果您能够使用JavaScript，那么这个脚本可能就是您正在寻找的。它跨浏览器工作，目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。
http://james.padolsey.com/demos/grayscale/
其他回答
对于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"
用CSS实现灰度最简单的方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
该属性仍然不完全支持，并且仍然需要-webkit-filter属性来支持所有浏览器。
在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:-)
如果您或其他将来面临类似问题的人愿意使用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);
?>
旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。
绝对定位悬停在一个img(或文本区域，不需要点击或选择)可以密切模仿的效果的颜色比例，通过rgba()或半透明png。
它不会给出一个单一的颜色尺度，但会将颜色的阴影超出范围。
在代码笔上用10种不同的颜色通过伪元素进行测试，最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)
