Home > Article > Web Front-end > How to add a blur layer effect to an image using css
How to add a blur layer effect to an image using css
- WBOYOriginal
- 2021-12-10 11:35:145651browse
In CSS, you can use the filter attribute to add a blur layer effect to an image. The function of this attribute is to set the visual effect of the element. When this attribute is used together with the "blur()" function, you can add a blur layer effect to the image. Add a blur effect, the syntax is "picture element {filter:blur(blur value px);}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to use css to add a blur layer effect to an image
In css, if you want to add a blur layer effect to an image, you need to use The filter attribute is used to define the visual effect of the element (usually ).
When the attribute value is blur(px), set Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are blended together on the screen, so the larger the value, the blurr it is;
If no value is set, the default is 0; this parameter can Set css length value, but does not accept percentage value.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.img1 {
filter: blur(2px);
}
</style>
设置了模糊效果：<br><img src="1118.01.png" class="img1" alt="How to add a blur layer effect to an image using css" ><br>
没设置模糊效果：<br><img src="1118.01.png" class="img2" alt="How to add a blur layer effect to an image using css" >
</body>
</html>Output result:
If you are interested, you can continue to visit:css Video tutorial.
The above is the detailed content of How to add a blur layer effect to an image using css. For more information, please follow other related articles on the PHP Chinese website!