這篇文章給大家分享了如何利用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>
總結
以上就是這篇文章的全部內容,希望大家能喜歡,謝謝大家對topic.alibabacloud.com的支援。