Webkit支持CSS过滤器。所以我们现在有了一个跨浏览器的解决方案。

img { 过滤器:灰色;/* ie6-9 */ -webkit-filter:灰度(1);/*谷歌Chrome, Safari 6+ & Opera 15+ */ 过滤器:灰度(1);/* Microsoft Edge和Firefox 35+ */ ｝ /*禁用悬停时的灰度*/ img:{徘徊 -webkit-filter:灰度(0); 过滤器:没有; ｝ < img src = " https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png " >

Internet Explorer 10怎么样?

你可以用灰色填充。

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

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

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

参考

兼容性矩阵

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

即使有CSS3或专有的-webkit-或-moz- CSS属性，看起来也不可能(目前)。

然而，我确实发现了去年6月在HTML上使用SVG过滤器的文章。目前在任何浏览器中都无法使用(演示版本暗示了一个自定义WebKit构建)，但作为概念的证明，它非常令人印象深刻。

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

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

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