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

This article mainly shows you "what are the filters supported by css3". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what are the filters supported by css3?"

The filters supported by css3 are visual effects defined by the filter properties, including: 1, blur filter, which can set Gaussian blur to the image; 2, brightness filter; 3, contrast filter; 4, projection filter; 5, grayscale filter; 6, hue rotation filter; 7, inverted image filter; 8, transparency filter; 9, saturation filter; 10, dark brown filter.

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

The filters supported by css3 are visual effects defined by the filter property.

Functions that can be set by the filter property (visual effects)

1. Blur filter (px)

Set Gaussian blur to the image. The higher the value, the more blurred. The default is 0, but it is not blurred.

Filter:blur (4px)

2. Brightness filter (%)

Apply a linear multiplication to the picture to make it look brighter or darker. If the value is 0%, the image will be all black. If the value is 100%, the image does not change. Other values correspond to the linear multiplier effect. A value of more than 100% is also possible, and the image will be brighter than before. If there is no set value, the default is 1.

Filter: brightness (200%)

3. Contrast filter (%)

Adjust the contrast of the image. If the value is 0%, the image will be all black. The value is 100%, and the image remains unchanged. The value can exceed 100%, which means a lower contrast will be used. If there is no set value, the default is 1.

Filter: contrast (200%)

4. Projection filter (x offset y offset blur range color)

It is similar to the box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance.

Filter: drop-shadow (8px 8px 10px red)

5. Grayscale filter (%)

Converts an image 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. If not set, the default value is 0. You can also write a decimal between 0 and 1.

Filter:grayscale (0.5)

6. Hue rotation filter (deg)

Apply hue rotation to the image. Let the colors in the image rotate accordingly in the hue loop. If the value is 0deg, the image does not change. If the value is not set, the default is 0deg. Although this value does not have a maximum value, a value that exceeds 360deg is equivalent to another circle.

Filter: hue-rotate (90deg)

7. Invert image filter (%)

Reverses the input image. Value defines the scale of the conversion. 100% of the value is completely reversed. If the value is 0%, the image does not change. A value between 0% and 100% is a linear multiplier of the effect. If the value is not set, the default value is 0.

Filter: invert (100%)

8. Transparency filter (%)

The transparency of the image. A value of 0% is completely transparent, and a value of 100% means no change in the image. Between 0 and 100% is partially transparent. You can also replace% with a decimal between 0 and 1.

Similar to the existing opacity properties, except that through filter, some browsers provide hardware acceleration to improve performance.

Filter: opacity

9. Saturation filter (%)

A value of 0% is completely unsaturated, and a value of 100% means no change in the image. More than 100%, the saturation increases and the color becomes heavier.

Filter: saturate (800%)

10. Dark brown filter (%)

Converts the image to dark brown. A value of 100% is completely dark brown, and 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.

Filter: sepia (100%)

Use the code:

&: hover {- webkit-filter: opacity (0.5%);-o-filter: opacity (0.5);-moz-filter: opacity (0.5);-ms-filter: opacity (0.5); filter: opacity (0.5);} above is all the content of the article "what are the filters supported by 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.