How to use css3 to realize the Gaussian blur effect of a picture

Editor to share with you how to use css3 to achieve the Gaussian blur effect of the picture, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The numbers in the table represent the version number of the first browser that supports the method.

The-webkit- immediately after the number is the prefix of the specified browser.

Note: the non-standard "filter" attribute supported by older InternetExplorer browsers (4.0to8.0) has been deprecated. Browsers in IE8 and earlier versions typically use the cssopacity property.

Let's take a look at the filter attribute, which is now supported in the specification:

Grayscale (grayscale): decimal values between 0 and 1

Sepia (brown): a decimal value between 0 and 1

Saturate (saturation): value is num

Hue-rotate (hue rotation): value is angle

Invert (inverted color): decimal values between 0 and 1

Opacity (transparency): decimal values between 0 and 1

Brightness (luminance): a decimal value between 0 and 1

Contrast (contrast): value is num

Blur (blur): value is length (radius)

Drop-shadow (Shadow)

Filter syntax for obfuscation:

Filter:blur ()

Blur () sets Gaussian blur to the image. The "length (radius)" value sets the standard deviation of the Gaussian function, or how many pixels are blurred together on the screen, so the higher the value, the more blurred; if there is no set value, the default is 0; this parameter sets the css length value, but does not accept percentage values.

The above is all the content of this article "how to use css3 to achieve the Gaussian blur effect of a picture". 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!