What is -webkit-filter?_html/css_WEB-ITnose

These filter effects were originally used in SVG, W3C introduced them to CSS, then formulated CSS Filter Effects 1.0, and now webkit is the first to support it.

The effects currently supported in the specification are:

- grayscale

- sepia brown

- saturate

- hue-rotate

- invert

- opacity

- brightness

- contrast contrast

- blur blur

- drop-shadow shadow

Well, some of them are repeated with CSS3, but how to use it specifically It also depends on the specific situation. At least we can use different methods to achieve the same effect? ​​For example, transparency.

Usage is standard CSS writing:

-webkit-filter: blur(2px);

Original image:

-webkit-filter:none;

Grayscale:

-WebKit-filter: grayscale(0.5); Grayscale 50%;

Blur:

-webkit-filter:blur(3px); This is blur level 3px

Brown:

-WebKit-filter: sepia (0.5); 50% brown

Brightness:

-webkit-filter: brightness (5); 50% brightness

Hue:

-WebKit-filter:hue-rotate(180deg);

Invert color:

-WebKit-filter: invert(1);

Saturation:

-WebKit-filter: saturate(5 );

Contrast:

-WebKit-filter:contrast(1.4);