Analysis of CSS3 filter

Css 3 filter is a powerful tool in the page for specific display effects. It makes our pages more personalized and reduces PS work. Filter attribute values mainly include the following 10 types:

1. 1. Blur
   2. Grayscale
   3. Sepia
   4. Saturate
   5. Hue-rotate
   6. Invert
   7. Brightness
   8. Contrast
   9. Opacity
   10. Drop-shadow

The image used in this article is as follows:

　　1. blur attributes.The usage format of blur is generally filter: blur (1px);-webkit-filter: blur (1px); this attribute is used to add a blur effect to the element. The display effect is as follows:

　　Ii. grayscale attributes.Grayscale is generally used in the format of filter: grayscale (0.6);-webkit-filter: grayscale (0.6); this attribute is used to set the gray level of the element to make the color image black and white, the display effect is as follows:

　　3. sepia attributes.The format used by sepia is generally filter: sepia (0.6);-webkit-filter: sepia (0.6). This attribute is used to set the brown color of the element and the display effect is as follows:

　　4. saturate attributes.The usage format of saturate is generally: filter: saturate (0.15);-webkit-filter: saturate (0.15). This attribute is often used to change the image saturation. The display effect is as follows:

　　5. hue-rotate attributes.The format of hue-rotate is filter: hue-rotate (189deg);-webkit-filter: hue-rotate (189deg). This attribute is often used to change the color of an image, the display effect is as follows:

　　6. invert attributes.The invert format is generally: filter: invert (56%);-webkit-filter: invert (56%); this attribute is used for Reversed color, the effects of invert are the same as those on the bottom of our camera. The effects are as follows:

　　VII. brightness attributes.Brightness is generally used in the following format: filter: brightness (300%);-webkit-filter: brightness (300%); this attribute is used to set the brightness of an image. The display effect is as follows:

　　8. contrast attributes.The usage format of contrast is: filter: contrast (56%);-webkit-filter: contrast (56%); this attribute is used to change the image contrast. The display effect is as follows:

　　9. opacity attributes.The opacity format is generally: filter: opacity (56%);-webkit-filter: opacity (56%). This attribute is used to set the image transparency. The display effect is as follows:

　　10. drop-shadow attribute.The usage format of drop-shadow is generally: filter: drop-shadow (10px 10px yellow);-webkit-filter: drop-shadow (10px 10px 10px yellow ); it is used to add a shadow effect to an image, similar to box-shadow. The display effect is as follows:

Ps: how to display opacity in IE:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=50);