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

如果您能够使用JavaScript，那么这个脚本可能就是您正在寻找的。它跨浏览器工作，目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。

http://james.padolsey.com/demos/grayscale/

下面是一个用于LESS的mixin，它可以让你选择任何不透明度。为纯CSS以不同的百分比填写变量。

这里有个小提示，它使用饱和类型的矩阵所以你不需要做任何花哨的事情来改变百分比。

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

然后使用它:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

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

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

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

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

如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>，所以它应该可以工作。

所以我在谷歌上搜索了“canvas grayscale”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，似乎可以。