How to add a blur layer to a picture with css

Editor to share with you how to use css to add blur layer effect to 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!

In css, you can use the filter attribute to add a blur layer effect to the picture. The role of this attribute is to set the visual effect of the element. When this attribute is used with the "blur ()" function, you can add a blur effect to the picture. The syntax is "picture element {filter:blur (fuzzy value px);}".

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

In css, to add a blur layer effect to a picture, you need to use the filter attribute, which is used to define the element (usually

The visual effect of

Sets Gaussian blur to the image when the attribute value is blur (px). The value of "radius" 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 no value is set, the default is 0; this parameter sets the css length value, but does not accept the percentage value.

Examples are as follows:

Document .img1 {filter: blur (2px);} sets the blur effect:

No blur effect is set:

Output result:

The above is all the content of the article "how to add a blur layer effect to a picture with css". 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!