Detailed graphic explanation of the use of the filter attribute in CSS3 (example code)

I recently accidentally discovered a particularly cool attribute on the Internet, which is the filter attribute in CSS3. This attribute can change the color of the picture. One picture can present multiple effects. Next I will introduce to you how to use the filter filter in CSS3, as well as an example to demonstrate the effect of the filter filter. If you are interested, please continue to read below.

Many people don’t know what CSS filter means. In layman's terms, filter refers to a filter. The officially defined filter attribute can set the visual effect (such as blur and saturation) of an element (usually ).

Filter attribute syntax: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Usage method: Just add the filter attribute directly to the image that needs to be set.

You can see that its attributes have many optional values. Let’s briefly introduce their meaning

1, grayscale grayscale

2, sepia brown (with a variety of Retro old photo feeling)

3, saturate

4, hue-rotate

5, invert

6, opacity Transparency

7, brightness

8, contrast

9, blur

10, drop-shadow

Example Demonstration 1:

Use the filter attribute to convert the image into a grayscale image, and the value is the conversion ratio. When the value is 100%, it is completely converted to a grayscale image. When the value is 0%, there is no change in the image. When the value is between 0% and 100%, it is between complete grayscale and the original image. In this example, the grayscale is set to 50%

HTML code:

<img  src="/static/imghw/default1.png"  data-src="img/草莓.jpg"  class="lazy"      style="max-width:90%" height="192px"/ alt="Detailed graphic explanation of the use of the filter attribute in CSS3 (example code)" >

CSS code:

img {
	 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	filter: grayscale(50%);
    }

Rendering:

The former one is the original image, and the latter one is the effect of setting 50% grayscale.

Example 2:

Use the filter attribute to set the image to Gaussian blur, and the "radius" value sets the standard deviation of the Gaussian function, or the screen How many pixels are blended together, so the larger the value, the blurrier it is; if there is no set value, the default is 0; this parameter can set the CSS length value, but does not accept percentage values.

img {
	 -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */
    	filter: blur(1.5px);
    }

Rendering:

In this example, set the blur to 1.5px to give the image a Gaussian blur effect, as shown in the picture.

Summary: The above introduces how to use the image filter attribute filter in CSS3. It has many attribute values. Here are only two demonstrations. As for other attributes, friends can make their own Give it a try, you might have unexpected results.

The above is the detailed content of Detailed graphic explanation of the use of the filter attribute in CSS3 (example code). For more information, please follow other related articles on the PHP Chinese website!