根据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 */
}

更多的浏览器支持信息请点击这里。

根据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代码

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

?>

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

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

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

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

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

设置在白色背景上的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 >

参考

兼容性矩阵

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

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