首先我们要知道实现毛玻璃效果的关键点:filter滤镜
html代码
<div class="main"></div>
先写一个居中的div,并给body加上背景图,以及居中的div设置背景颜色和透明度
body,
html {
background: url("./img/lamb.jpg");
background-position: bottom;
background-size: cover;
background-attachment: fixed;
}
.main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 800px;
height: 500px;
margin: auto;
background: rgba(255, 255, 255, .3);
box-shadow: 4px 4px 6px 3px rgba(0, 0, 0, .3);
border-radius: 15px;
}
这里我们不在此元素上写filter属性是因为其会导致内容的透明度改变,所以使用一个可行的方法是为其添加伪元素
效果如下图