请先忽略背景图，遮罩位置是随便放的，我们主要关注下面的代码↓
<!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>