请先忽略背景图，遮罩位置是随便放的，我们主要关注下面的代码↓
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别</title>
<style>
html {
margin: 0;
padding: 0;
position: absolute;
/*背景图片*/
width: 100%;
height: 100%;
background: transparent url(https://sc.68design.net/photofiles/202102/qfLzFzr5bb.jpg) no-repeat center / cover;
}
.square {
left: 0;
width: 100%;
height: 200px;
position: absolute;
color: white;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
width: 100%;
position: absolute;
top: 350px;
text-align: center;
color: white;
z-index: 1;
}
/*让div自己模糊*/
.square1 {
top: 300px;
background: red;
filter: blur(10px);
}
/*让div遮住的部分模糊*/
.square2 {
top: 500px;
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<h1>自己模糊 filter: blur(10px)</h1>
<div class="square square1"></div>
<div class="square square2">遮住的部分模糊 backdrop-filter: blur(10px)</div>
</body>
</html>
标签：center,100%,10px,filter,blur,backdrop From： https://blog.51cto.com/u_15920212/5962833