CSS3把圖片變成灰色模式的執行個體

來源:互聯網
上載者:User
這篇文章給大家分享了如何利用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的支援。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.