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