要获得模糊效果，请使用 CSS 过滤器属性，该属性允许在元素上产生模糊或者颜色偏移等效果。
filter 属性的 blur 函数为输入图像添加了高斯模糊。
半径值指定高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，以便较大的值会产生更多的模糊。
如果未提供参数，则使用值 0。
该参数指定为 CSS 长度，但不接受百分比值。
语法
filter: blur(px);
要对背景图像应用模糊效果，使用 blur 函数使用 z-index 属性设置元素的堆叠顺序，将宽度和高度设置为 100% 以获得完整的背景图像。
将 position 属性设置为绝对值以相对于最近的定位祖先定位元素。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题 </title>
<style>
img.background {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
</style>
</head>
<body>
<h1>模糊的背景</h1>
<img class="background" src="/pencil.png" alt="Aleq">
<p>注意：Internet Explorer、Safari 5.1 及更早版本不支持 filter 属性。</p>
</body>
</html>
我们还可以将模糊的背景图像应用到另一个图像。
对于该用途，请参见下面的示例：
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题 </title>
<style>
img.background {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
filter: blur(10px);
}
img.circle {
display: block;
max-width: 60%;
height: auto;
margin: 0 auto;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>模糊的背景</h1>
<p>注意：Internet Explorer、Safari 5.1 及更早版本不支持 filter 属性。</p>
<img class="background" src="/light.jpeg" alt="Aleq">
<img class="circle" src="/car.jpeg" alt="Aleq">
</body>
</html>
COPY TO CLIPBOARD SELECT ALL
日期：2020-06-02 22:14:57 来源：oir作者：oir