Question

css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法

Answer 1

直接将其放入页面中的<style></style>即可，或者外部样式直接在内部引用。

html,body { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: gray; 
}

Answer 2

最新的css3才有这个功能，比较新的浏览器才支持
　　http://www.w3cplus.com/css3/ten-effects-with-css3-filter
上述链接有详细内容
变黑白即 grayscale灰度 部分

Answer 3

在IE下可以尝试这个方法：img { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
chrome和firefox直接用CSS3的样式即可，类似这样的写法：
img{ -webkit-filter:grayscale(1);}

Answer 4

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 */
}

Answer 5

*{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
添加上面样式。