The Filter property of the CSS3 is described in detail

Today, we will give you a detailed explanation of the filter in the CSS3 filter you attribute, he is very powerful, you can make a picture of the Web page similar to the image processing effect of PS. We can manipulate the image with CSS.

Browser support: Only IE browser does not support filter properties, in order to be compatible with the lower version of Safari and Google Browser, you need to prefix-webkit-

Filter properties The effects that are now supported in the specification are:

Grayscale grayscale (a decimal value of 0-1)

Filter:grayscale (1); -webkit-filter:grayscale (1);

0 indicates grayscale is 0%, the original is displayed, and 1 indicates grayscale is 100% gray.

Sepia Brown (a decimal value of 0-1)

Filter:sepia (1); -webkit-filter:sepia (1);

0 means that the tan is 0%, the original is displayed, and 1 indicates that the tan is 100% Brown.

Saturate saturation (value num)

Filter:saturate (1.8); -webkit-filter:saturate (1.8);

0 means saturation is 0, the picture shows black and white, 0.5 means saturation is half of the original, 1 means saturation equals the original, and a value greater than 1 indicates saturation is enhanced.

Hue-rotate hue Rotation (value angle) angle deg

Filter:hue-rotate (60DEG); -webkit-filter:hue-rotate (60DEG);

Represents the specific angle of the hue rotation.

Invert inverse color (a decimal value of 0-1)

Filter:invert (1); -webkit-filter:invert (1);

0 indicates that the original is not reversed, and 1 indicates that 100% is completely inverted.

Opacity transparency (a decimal value of 0-1)

Filter:opacity (0.5); -webkit-filter:opacity (0.5);

0 is fully transparent, 0.5 is translucent, and 1 means 100% is completely opaque.

Brightness brightness (value num)

Filter:brightness (2); -webkit-filter:brightness (2);

0 indicates a brightness of 0, shows black, 0.5 is half the brightness of the original, 1 indicates the original brightness, and a value greater than 1 indicates a brightness enhancement.

Contrast contrast ratio (value num)

Filter:contrast (1.8); -webkit-filter:contrast (1.8);

0 indicates a contrast of 0, a solid color, 0.5 means that the contrast is half of the original, 1 is the original contrast, the value is greater than 1, the higher the value, the stronger the contrast.

Blur blur (value is length)

Filter:blur (5px); -webkit-filter:blur (5px);

Represents the degree of bokeh pixel value.

Drop-shadow Shadow

Filter:drop-shadow (0 0 10px #000); -webkit-filter:drop-shadow (0 0 10px #000);

Consistent with CSS3 Box-shadow property values.

Multiple attribute values can be written together, separated by spaces, similar to transform multi-attribute notation

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How to use CSS to do the picture rotation effect

A workaround for the background color that cannot be displayed in HTML

How to optimize HTML pages