Shulou(Shulou.com)06/02 Report--

This "how to use the css style to change the picture to gray" article, the article sample code introduction is very detailed, with a certain reference value, interested friends must refer to, for "how to use the css style to change the picture to gray", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

In css, you can use the filter attribute to change the picture to gray, which can add a filter effect to the picture, just add "filter: grayscale (grayscale value%) to the picture element;" style to set the picture to gray.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the filter property to change the picture to gray.

The filter attribute defines the element (usually the

), that is, add filter effects to the picture, such as blur and saturation.

When the value of the filter property is grayscale (%), the image can be converted to a grayscale image. Value defines the scale of the conversion. A value of 100% completely converts to a grayscale image, while a value of 0% does not change the image. A value between 0% and 100% is a linear multiplier of the effect. If not set, the default value is 0

Sample code:

.img1 {- webkit-filter: grayscale / * Chrome, Safari, Opera * / filter: grayscale (50%) } .img2 {- webkit-filter: grayscale; / * Chrome, Safari, Opera * / filter: grayscale .img3 {- webkit-filter: grayscale; / * Chrome, Safari, Opera * / filter: grayscale;}

Set the grayscale of the picture:

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. The above is all the contents of the article "how to use css style to change a picture to gray". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.