你不需要使用那么多的前缀来充分使用，因为如果你为旧的firefox选择前缀，你就不需要为新的firefox使用前缀。

为了充分使用，请充分使用以下代码:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

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

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

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

更新:我把它做成了一个完整的GitHub回购，包括针对IE10和IE11的JavaScript polyfill: https://github.com/karlhorky/gray

我最初使用SalmanPK的答案，但后来创建了下面的变体，以消除SVG文件所需的额外HTTP请求。内联SVG适用于Firefox 10及以上版本，低于10的版本甚至不再占全球浏览器市场的1%。

从那以后，我一直在这篇博文中更新这个解决方案，在演示中增加了对退色的支持，对SVG的IE 10/11支持，以及部分灰度的支持。

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

下面是一个用于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);
    }
}

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