首頁 > 文章 > web前端 > CSS3把圖片變成灰色模式的實例

CSS3把圖片變成灰色模式的實例

高洛峰原創: 2017-03-02 15:41:412006瀏覽

這篇文章跟大家分享如何利用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中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS3按鈕滑鼠懸浮實現光圈效果下一篇：CSS3按鈕滑鼠懸浮實現光圈效果

看更多