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

?>

根据robertc的回答:

为了得到从彩色图像到灰度图像的正确转换，而不是像这样使用矩阵:

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

你应该像这样使用转换矩阵:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

这对于基于RGBA(红-绿-蓝-alpha)模型的所有类型的图像都可以正常工作。

关于为什么你应该使用矩阵的更多信息，我发布了更可能的robertc的一个检查以下链接:

亮度和色差信号 马格斯的回答:“colorvalue中的greyscalevalue”@stackoverflow部分:编辑2:@Hans Passant Charles A. Bouman -普渡大学-模拟电视第20和21页 在这里你可以找到一些c#和VB代码

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

对于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请求。

旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。

绝对定位悬停在一个img(或文本区域，不需要点击或选择)可以密切模仿的效果的颜色比例，通过rgba()或半透明png。

它不会给出一个单一的颜色尺度，但会将颜色的阴影超出范围。

在代码笔上用10种不同的颜色通过伪元素进行测试，最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)

事实上，如果我记得正确地使用了一个专有的CSS属性，用IE更容易做到这一点。试试这个滤镜:灰色，来自http://www.ssi-developer.net/css/visual-filters.shtml

Ax的方法只是使图像透明，并在其后面有黑色背景。你肯定会说这是灰度图。

虽然您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。