Home  >  Article  >  Web Front-end  >  Example of turning an image into gray mode using CSS3

Example of turning an image into gray mode using CSS3

高洛峰
高洛峰Original
2017-03-02 15:41:412010browse

This article shares with you how to use CSS3 to turn images into gray mode. It is very simple to implement. Friends in need can refer to it.

Example code:

The code is as follows:

<!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>

Summary
The above is the entire content of this article, I hope you all like it, and thank you for your support of the PHP Chinese website.

For more related articles on examples of CSS3 turning images into gray mode, please pay attention to the PHP Chinese website!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn