一种新的方法已经在现代浏览器上出现了一段时间了。

背景混合模式可以让你得到一些有趣的效果，其中之一是灰度转换

设置在白色背景上的luminosity值允许这样做。 (鼠标悬停，灰色显示)

test { 宽度:300 px; 身高:200 px; 背景:url(“http://placekitten.com/1000/750”)，白色; background-size:封面; ｝ test:{徘徊 background-blend-mode:光度; ｝ < div class = "测试" > < / div >

亮度取自图像，颜色取自背景。因为它总是白色的，所以没有颜色。

但它允许更多。

你可以将效果设置为3层。第一个是图像，第二个是黑白渐变。如果你应用混合模式，你会得到一个白色的结果，就像之前在白色部分，但原始图像在黑色部分(乘白色得到白色，乘黑色没有效果)。

在渐变的白色部分，你得到了和以前一样的效果。在渐变的黑色部分，您正在混合图像本身，结果是未经修改的图像。

现在，所有需要做的就是移动渐变来获得动态效果:(悬停可以看到颜色)

div { 宽度:600 px; 身高:400 px; ｝ test { 背景:url(“http://placekitten.com/1000/750”), 线性渐变(0deg，白色33%，黑色66%)，url(“http://placekitten.com/1000/750”); 背景-位置:0px 0px 0% 0px 0px; 背景尺寸:覆盖，100% 300%，覆盖; 背景-混合模式:亮度，倍增; 过渡:全部为2s; ｝ test:{徘徊 背景位置:0px 0px, 0px 66%， 0px 0px; ｝ < div class = "测试" > < / div >

参考

兼容性矩阵

一个糟糕但可行的解决方案是:使用Flash对象渲染图像，然后在Flash中为您提供所有可能的转换。

如果您的用户使用尖端浏览器，并且Firefox 3.5和Safari 4支持它(我不知道是否支持)，您可以调整图像的CSS颜色配置文件属性，将其设置为灰度ICC配置文件URL。但那有很多假设!

如果您或其他将来面临类似问题的人愿意使用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);

?>

webkit中对本地CSS过滤器的支持已从当前版本19.0.1084.46添加

所以-webkit-filter:灰度(1)将工作，这是更容易为webkit的SVG方法…

作为对其他人答案的补充，可以在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参考资料

在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:-)