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

试试这个jquery插件。虽然，这不是一个纯粹的HTML和CSS解决方案，但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度，以最适合您的使用。使用方法如下:

$("#myImageID").tancolor();

有一个互动演示。你可以摆弄它。

查看有关使用方法的文档，它非常简单。文档

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

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

也许这样能帮到你

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

今天又遇到了同样的问题。我最初使用SalmanPK解决方案，但发现FF和其他浏览器之间的效果不同。这是因为转换矩阵只对亮度有效，而不是像Chrome/IE中的滤镜那样对亮度有效。令我惊讶的是，我发现SVG中的另一种更简单的解决方案也适用于FF4+，并产生更好的结果:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

用css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

需要注意的是，IE10在标准兼容模式下不再支持“filter: gray:”，所以需要在头文件中切换兼容模式才能工作:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

作为对其他人答案的补充，可以在FF上降低图像的饱和度，而不会出现SVG矩阵的头痛问题:

<feColorMatrix type="saturate" values="$v" />

其中$v在0和1之间。相当于filter:grayscale(50%);。

生活例子:

.desaturate { filter: url("#desaturate"); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: "Helvetica"; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0.4"/> </filter> </svg> <figure> <figcaption>Original</figcaption> <img src="http://www.placecage.com/c/500/200"/> </figure> <figure> <figcaption>Half grayed</figcaption> <img class="desaturate" src="http://www.placecage.com/c/500/200"/> </figure>

MDN参考资料