前因：
后果，二话不说，上效果：
注意：此方法只适合body设置背景图时的模糊。
页面布局方面，主要父元素为body，子元素为想要的效果，涉及到的知识点：background、filter、定位、伪元素、flex布局（主要为子元素水平居中使用）、z-index=-1也是很重要的一个点。
background
简单粗暴（https://www.w3school.com.cn/cssref/pr_background.asp）
background: url('./timg1.jpg') no-repeat center fixed;
分别对应：背景图片地址、平铺效果、滚动、位置
同时也要标注背景图片尺寸background-size
background-size: cover;
上图：
filter
blur(px) 给图像设置高斯模糊。
附上Filter函数的地址https://www.runoob.com/cssref/css3-pr-filter.html
定位
常说的一句话“子绝父相”
伪元素
布局中用了很多伪元素
z-index=-1，通过设置使父元素内容在内容下面
代码：
<!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>毛玻璃效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
.item::before {
background: url('./timg1.jpg') no-repeat center fixed;
background-size: cover;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.item {
position: relative;
width: auto;
height: auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 5px 1px #fff;
color: #fff;
font-size: 15px;
font-weight: lighter;
line-height: 35px;
overflow: hidden;
}
.item::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -20px;
filter: blur(10px);
/* blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，
或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 */
}
</style>
</head>
<body>
<div class="item">
<p>
没有什么比时间更具有说服力了，<br>
因为时间无需通知我们就可以改变一切。<br>
——《活着》<br>
</p>
</div>
</body>
</html>若有不正确的地方请各位大佬指出，更多内容请参考：
https://www.jianshu.com/p/638e0007dc27
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦