模态框背景模糊需将backdrop-filter加在.modal-content上并设半透背景（如rgba(255,255,255,0.92)），而非.modal-backdrop；Safari须双写-webkit-backdrop-filter且避免transform等触发新层叠上下文的属性。
模态框背景模糊效果在现代浏览器里基本靠 backdrop-filter 实现，不是 HTML5 功能，也不是 filter 能直接搞定的——后者会把模态框自身内容也糊掉。
为什么给模态框加 backdrop-filter: blur(8px) 没反应
常见现象：写了样式但背景还是纯白/纯色，没任何模糊。根本原因不是代码写错，而是「背后没东西可糊」或「当前层看不着背景」。
- 模态框自身背景用了
background: #fff或background: white—— 必须改成带透明度的，比如background: rgba(255, 255, 255, 0.15) - 父容器（比如遮罩层
.overlay）设置了overflow: hidden，它会切断 backdrop 合成链，模糊失效 - 模态框或其任意祖先元素用了
transform、opacity: 0.99、will-change: transform等属性，意外创建了 stacking context，导致它“看到”的只是上一层容器的纯色背景，而不是页面主体内容 - 临时验证法：把模态框样式临时改成
background: transparent; border: 1px solid red;，滚动页面，看红框里是否透出底下文字/图片——不透，说明背景被挡死了
Safari 上模糊一闪而过或卡顿怎么办
iOS 15.4 之前和部分旧版 Safari 对 backdrop-filter 的合成策略极不稳定，不是兼容性开关问题，是 WebKit 渲染机制限制。
- 必须双写：
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);，缺一不可 - 避免在模糊元素或其父级上使用
transform: translateZ(0)或will-change: transform，它们会触发强制合成，反而加剧掉帧 - 如果滚动中模糊消失，尝试给模态框加
contain: layout paint style;（谨慎使用，某些场景会破坏布局） - 降级方案不是 JS 判断，而是 CSS 写两套：
@supports not (backdrop-filter: blur(1px)) { .glass-panel { background: rgba(255, 255, 255, 0.8); } }
模态框结构怎么组织才不容易踩坑
关键不是“怎么写样式”，而是“谁在哪个层叠上下文里”。模糊生效的前提是：模态框能直接“看见” <body> 或其带背景的内容层。
立即学习“前端免费学习笔记（深入）”；
- 推荐把模态框直接挂到
<body>下（用 JS 动态 append），避开中间多层 DOM 和样式干扰 - 遮罩层
.overlay不要设background，只用background: rgba(0, 0, 0, 0.5)提供蒙版，让它保持“透” - 模态框本身用
position: fixed，但别同时加transform—— 如果需要居中，用top: 50%; left: 50%; transform: translate(-50%, -50%);是安全的；但transform: translateZ(0)这类就危险 - 模糊值建议控制在
4px～12px之间；超过16px在中低端设备上容易明显掉帧，且文字边缘可能发虚
最常被忽略的一点：模糊效果依赖渲染管线中的“背景合成”阶段，它不关心 z-index 数值，只认层叠上下文是否连通。很多调试花半天改 z-index，其实该删的是某一行 opacity: 0.99。
