简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

Example of turning an image into gray mode using CSS3

高洛峰
Release： 2017-03-02 15:41:41
Original
1959 people have browsed it

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>
Copy after login

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!


Related labels：
css3 picture grey
source：php.cn
Previous article：CSS3 button mouse hover to achieve aperture effect Next article：A brief discussion on horizontal centering of CSS processing
Statement of this Website
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
Latest Articles by Author
Latest Issues
Div with transparent semicircle cutout I want to make a transparent cut out semicircle shape using only CSS3. The only requiremen...
From 2023-10-22 17:51:09
0
2
303
How to make an inset shadow in SVG I need to make a box with an inline shadow, just like CSS3 has an inline box shadow. What ...
From 2023-10-21 15:57:11
0
2
232
Enhance gradient backgrounds with CSS3 transitions I'm trying to use css to make a transition on a thumbnail image so that the background fad...
From 2023-10-12 18:05:11
0
2
213
Use CSS3 transitions with gradient backgrounds I'm trying to use css to make a transition on a thumbnail image so that the background fad...
From 2023-08-23 21:25:42
0
2
324
How to apply CSS filters to background images I have a JPEG file that I use as a background image for a search page, and I'm using CSS t...
From 2023-08-23 14:06:46
0
2
189
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！