直接给遮罩层加backdrop-filter: blur(10px)即可实现模糊背景，但需满足两个前提：遮罩层为半透明（如rgba(0,0,0,0.3)）且body或其子元素存在可见背景内容；同时须添加-webkit-backdrop-filter兼容Safari，并在弹窗显示时为body添加modal-open类以设置overflow-y: hidden防止页面滚动。
弹窗本身怎么加模糊背景（backdrop-filter）
直接给弹窗的遮罩层（overlay）加 backdrop-filter: blur(10px) 就行，但必须满足两个前提：遮罩层得是半透明的、且背后真有可被模糊的内容（比如 body 里的图片或色块）。很多人写了 backdrop-filter 没效果，是因为遮罩层用了 background: rgba(0,0,0,0.5) 却忘了父容器（比如 ）本身没内容或被白色背景盖住了——模糊的是“后面的东西”，不是弹窗自己。
实操建议：
- 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3) - 确保
或其直接子元素（如<div id="app">）有可见背景（图片、渐变、甚至只是带 padding 的色块） <li>加上 <code>-webkit-backdrop-filter: blur(10px)兼容 Safari（iOS 和 macOS 都要） - 别在遮罩层上同时设
background-color: white——那会挡住背后的画面，模糊就失效了 - 用
@supports (backdrop-filter: blur(1px))包裹模糊样式 - 不支持时，遮罩层改用纯色半透（
background: rgba(0,0,0,0.5)），视觉上虽无模糊但功能完整 - 别用 JS 检测 UA 做兼容——UA 字符串不可靠，且现代 Edge 已是 Chromium 内核，应走
@supports路线 - 别直接写
body { overflow: hidden }全局样式——会影响所有页面状态 - 最好用一个 class 控制，比如
，CSS 里写.modal-open { overflow: hidden } - 如果页面原本就有横向滚动条，
overflow: hidden可能导致右侧内容被截断，可改用overflow-y: hidden
弹窗内容区域要不要加 backdrop-filter
一般不用。弹窗主体（比如 <div class="modal-content">）通常需要清晰可读，加模糊反而影响文字识别。如果你真想让它带点玻璃态效果，可以单独加，但得注意两层模糊叠加（遮罩 + 内容）容易过虚，且 iOS 上可能触发渲染 bug（内容闪烁或消失）。
<p>更稳妥的做法是只模糊遮罩层，内容区域保持纯白/浅灰背景 + 适当 <code>border-radius 和 box-shadow 来营造层次感。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：backdrop-filter 加在内容区后，文字发虚、按钮点击失效（因 Safari 对嵌套模糊的 pointer-events 处理不稳定）。
IE 和旧版 Edge 不支持怎么办
backdrop-filter 在 IE 完全不支持，Edge 17+ 才开始支持，而且早期版本有严重性能问题。如果你的用户里还有 Win10 默认 Edge（非 Chromium 版），或者企业内网环境，就得降级处理。
推荐方案是用 CSS 特性检测 + 渐进增强：
注意：某些安卓 WebView（尤其 Android 9 及以下）也忽略 backdrop-filter，但不会报错，只是静默失效。
为什么点开弹窗后页面还能滚动
模糊遮罩层只是视觉层，它不阻止 滚动。用户一滚，底下内容就动了，模糊效果看起来像“跟着跑”，体验割裂。
解决方法很简单：弹窗显示时给 加 overflow: hidden；关闭时恢复。但要注意两点：
这个细节容易被忽略，但一旦漏掉，再漂亮的模糊背景也会显得廉价。
