filter
用于图片模糊
img {
filter: blur(10px);
}
backdrop-filter
用于背景模糊,不会影响元素上面的内容
.box {
width: 600px;
height: 400px;
border: 1px solid #f5f5f5;
backdrop-filter: blur(2px);
border-radius: 10px;
h1 {
text-align: center;
width: 60%;
height: 60%;
line-height: calc(400px * 0.6);
color: #fff;
backdrop-filter: blur(20px);
background-color: rgba(0, 0, 0, 0.4);
z-index: 999;
}
}