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

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

更新:我把它做成了一个完整的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%);
}

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

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

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

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

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

参考

兼容性矩阵

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

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

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