今天小编跟大家讲解下有关利用CSS3把图片变成灰色模式的实例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS3把图片变成灰色模式的实例代码 的相关资料，希望小伙伴们看了有所帮助。
先来看看效果图：
实例代码：复制代码代码如下:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } img{width:400px;} </style> </head> <body> <img class="gray"src="https://www.aidi.net.cn//css/<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg</a>"> <img class="gray"src="https://www.aidi.net.cn//css/<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg</a>"/> <img src="https://www.aidi.net.cn//css/<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg</a>"> <img src="https://www.aidi.net.cn//css/<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg</a>"c/> </body></html>
总结以上就是这篇文章的全部内容 希望大家能喜欢 谢谢大家对AIDI的支持。
来源：爱蒂网
