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

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

事实上，如果我记得正确地使用了一个专有的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方法…

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

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