毛玻璃的特点:透明、磨砂。
无图无真相:
上图中的弹窗效果就是毛玻璃特效。
html很简单。
<div class="flex-center background-img">
<div class="content glass">家に連れてって</div>
</div>
可以看到html中有四个类,每个类有特定的职责:
- flex-center类负责子元素居中;
.flex-center {
height: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
- background-img类设置背景图片;
.background-img {
background: url('https://img1.baidu.com/it/u=765738194,3561086305&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
- content类设置子元素大小等几何属性;
.content {
padding: 80px 60px;
border-radius: 12px;
width: 450px;
font-size: 20px;
font-weight: 500;
}
- glass类设置毛玻璃效果。
.glass {
background-color: rgba(255,255,255,.2);
backdrop-filter: blur(15px);
box-shadow: 0 0 10px #333;
}