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

发布网友 发布时间：2022-04-26 08:22

我来回答

共6个回答

热心网友 时间：2022-04-06 15:12

直接将其放入页面中的<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; 
}

热心网友 时间：2022-04-06 16:30

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

热心网友 时间：2022-04-06 18:05

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

热心网友 时间：2022-04-06 19:56

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

参考资料：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

热心网友 时间：2022-04-06 22:04

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

热心网友 时间：2022-04-07 00:29

IE下用css去色，兼容考虑FF之类的话jquery有个插件，百度：grayscale.js