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

This article mainly shows you "what is the use of filter filter properties in CSS3", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "what is the use of filter filter properties in CSS3" this article.

Css3 filter filter property, can be similar to the effect of Photoshop image processing on the web page. With the advent of the H6 era, we can process the image through css.

Browser support: only IE browsers do not support the filter attribute. In order to be compatible with lower versions of safari and google browsers, you need to add the prefix-webkit-

The filter attribute now supports the following effects in the specification:

Grayscale grayscale (value is a decimal between 0 and 1)

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

0 means the grayscale is 0%, showing the original image, and 1 means the grayscale is 100% gray.

Sepia brown (value is a decimal between 0-1)

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

0 indicates that the brown chromaticity is 0%, which shows the original image, and 1 indicates that the brown chromaticity is 100% brown.

Saturate saturation (value is num)

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

0 means the saturation is 0, the picture is black and white, 0.5 means the saturation is half of the original image, 1 means the saturation is equal to the original image, and a value greater than 1 indicates that the saturation is enhanced.

Hue-rotate hue rotation (value is angle) Angle deg

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

Represents the specific angle of hue rotation.

Invert inverse (decimal value between 0-1)

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

0 means that the original image is not inverted, while 1 means 100% is completely inverted.

Opacity transparency (value is a decimal between 0-1)

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

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

Brightness brightness (value is num)

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

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

Contrast contrast (value is num)

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

0 means the contrast is 0, which is a solid color, 0.5 means the contrast is half of the original image, 1 is the contrast of the original image, and 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 pixel value of the virtual degree.

Drop-shadow Shadow

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

Consistent with the value of the css3 box-shadow property.

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

The above is all the content of the article "what is the use of filter filter properties in CSS3". 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.