CSS3把图片变成灰色模式的实例
程序员文章站
2022-04-19 16:02:51
...
这篇文章给大家分享了如何利用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="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>"> <img class="gray" src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>" /> <img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>"> <img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>" c/> </body> </html>
总结
以上就是这篇文章的全部内容,希望大家能喜欢,谢谢大家对PHP中文网的支持。
更多CSS3把图片变成灰色模式的实例相关文章请关注PHP中文网!