What are the filters supported by css3?

The filters supported by css3 are visual effects defined by the filter attribute, including: 1. Blur filter, which can set Gaussian blur to the image; 2. Brightness filter; 3. Contrast filter; 4. Drop shadow filter; 5. Grayscale filter; 6. Hue rotation filter; 7. Invert image filter; 8. Transparency filter; 9. Saturation filter; 10. Sepia filter.

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

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

Function that the filter attribute can be set (visual effect)

1. Blur filter (px)

Set Gaussian blur to the image. The larger the value, the more blurry it is. The default is 0, which means no blur.

filter:blur(4px);

2. Brightness filter (%)

Apply a linear multiplication to the image to make it look brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, there will be no change in the image. Other values ​​correspond to linear multiplier effects. Values ​​above 100% are okay and the image will be brighter than before. If no value is set, 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 completely black. The value is 100% and the image is unchanged. Values ​​can exceed 100%, meaning a lower comparison will be used. If no value is set, the default is 1.

 filter: contrast(200%);

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

is very similar to the box-shadow attribute; the difference is that through the filter, some browsers Better performance comes with hardware acceleration.

 filter: drop-shadow(8px 8px 10px red);

5. Grayscale filter (%)

Convert the image to grayscale. The value defines the scale of the conversion. If the value is 100%, the image will be completely converted to grayscale, and if the value is 0%, the image will remain unchanged. If not set, the value defaults to 0. You can also write decimals between 0-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 circle. If the value is 0deg, there will be no change in the image. If the value is not set, the default value is 0deg. Although this value does not have a maximum value, a value exceeding 360deg is equivalent to going around again.

 filter: hue-rotate(90deg);

7. Invert image filter (%)

Invert the input image. The value defines the scale of the conversion. 100% of the value is a complete reversal. A value of 0% means there is no change in the image. Values ​​between 0% and 100% are linear multipliers of the effect. If the value is not set, the value defaults to 0.

 filter: invert(100%);

8. Transparency filter (%)

The degree of transparency of the image. A value of 0% means complete transparency, a value of 100% means no change to the image. It is partially transparent between 0-100%. You can also use decimals between 0 and 1 instead of %.
It is very similar to the existing opacity attribute. The difference is that through filter, some browsers will provide hardware acceleration to improve performance.

 filter: opacity(30%);

9. Saturation filter (%)

A value of 0% means it is completely unsaturated, and a value of 100% means there is no change in the image. If it is greater than 100%, the saturation will increase and the color will become heavier.

 filter: saturate(800%);

10. Sepia filter (%)

Convert the image to sepia. A value of 100% is completely sepia, and a value of 0% leaves the image unchanged. Values ​​between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0.

 filter: sepia(100%);

Use 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);
        }

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What are the filters supported by css3?. For more information, please follow other related articles on the PHP Chinese website!