backdrop-filter 所谓的毛玻璃
专业术语
CSS属性，MDN解释：可以为元素后面区域添加图形效果，如模糊或者颜色偏移，适用于元素背后的所有元素；
拙见
可以把它理解成一层“图层蒙版”，放在想模糊处理的元素的上上层，就会出现模糊或者毛玻璃的效果，它并不是直接模糊背后的图片或者其他元素，而是在它们的表面添加一层“图层蒙版”。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,body{
width: 99%;
height: 99%;
}
.main{
width: 500px;
height: 350px;
margin: auto;
background-image: url("3.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.main::before{
content: "";
position:absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255,0.5);
backdrop-filter: blur(5px);
}
.photo{
width: 450px;
height: 300px;
position:relative;
left: 25px;
top: 25px;
}
</style>
<body>
<div class="main">
<div class="photo">
<img src="3.jpg" width="450px" height="300px" alt="">
</div>
</div>
</body>
</html>
mian::before中设置position:absolute;是为了防止把img元素挤下去，脱离文档流不影响其他元素位置
mian::before其他写法
.main::before{
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255,0.5);
backdrop-filter: blur(5px);
}
这样可以更加明显的看出来backdrop-filter产生的效果
不断尝试
.wrap{
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255,0.5);
backdrop-filter: blur(5px);
}
.photo{
width: 450px;
height: 300px;
position:relative;
left: 25px;
top: -325px;
}
<body>
<div class="main">
<div class="wrap"></div>
<div class="photo">
<img src="3.jpg" width="450px" height="300px" alt="">
</div>
</div>
</body>
</html>
最后实现的效果还是一样的。
