模态框背景模糊需加在.modal-content上并设半透背景，而非.modal-backdrop；safari需避免transform等强制合成属性，不支持时应降级为纯色半透背景。
模态框背景模糊不生效？检查 backdrop-filter 的渲染层级和父容器
直接加 backdrop-filter: blur(4px) 到 Bootstrap 模态框的 .modal-backdrop 上，大概率没反应——不是代码写错了，是它被“盖住了”或者“没画布”。backdrop-filter 只对**其背后区域**生效，而默认的 .modal-backdrop 是一个纯色 div，背后没有内容可模糊；真正要模糊的是它后面的页面主体。
- 必须把
backdrop-filter加在模态框内容层（如.modal-dialog或.modal-content），同时确保它的背景是半透明的（比如background-color: rgba(255,255,255,0.85)），才能让滤镜“看到”下层内容 -
.modal-backdrop本身建议保持透明或移除背景色，否则它会挡住底层，导致模糊失效 - 某些旧版 Bootstrap（v4.x）中
.modal-backdrop默认有z-index: 1040，而.modal是 1050，所以.modal-content必须在 backdrop 之上，且自身不遮挡视线
Bootstrap 5 中给 .modal-content 加模糊的最小可行写法
不用动 JS、不改 HTML 结构，纯 CSS 就能生效。关键是：保留原生层级关系，只增强视觉层。
- 目标元素选
.modal-content，不是.modal-backdrop - 必须设置
background-color为带 alpha 的值（如rgba(255,255,255,0.9)），全不透明或完全透明都不行 - 加上
backdrop-filter: blur(6px)和-webkit-backdrop-filter: blur(6px)（Safari 必须） - 避免用
border-radius过大 +overflow: hidden组合，这会裁掉模糊溢出，让边缘发硬
/* 示例 CSS */
.modal-content {
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
Chrome / Edge 有效但 Safari 白屏？检查是否触发了“合成层限制”
Safari 对 backdrop-filter 的启用条件更苛刻，常见白屏或卡顿不是兼容性问题，而是渲染管线被阻断了。
- 父容器不能有
transform: translateZ(0)或will-change: transform等强制合成操作，否则 Safari 会禁用 backdrop 滤镜 - 确保模态框没有被包裹在
filter: drop-shadow(...)或其他滤镜容器里，嵌套滤镜在 Safari 下直接失效 - 如果用了
body { overflow: hidden }（Bootstrap 默认行为），部分 Safari 版本会误判为“不可滚动区域”，导致 backdrop 不计算背景；可临时加body { -webkit-overflow-scrolling: touch }缓解
需要兼容 IE 或老安卓？别用 backdrop-filter，换方案
IE 完全不支持；Android WebView ≤ 75、Chrome ≤ 72 也不支持。强行降级用 filter: blur() 会模糊整个元素本身，不是背景，效果完全不同。
- 真要兼容，就放弃动态模糊，改用静态毛玻璃图：给
.modal-content设background-image指向一张预处理的高斯模糊截图（需配合 JS 动态截取，成本高） - 更现实的做法是检测支持性：
if ('backdropFilter' in document.documentElement.style)，不支持时 fallback 到纯色半透背景 - 注意：
@supports (backdrop-filter: blur(1px))在 Safari 15.4+ 才稳定，旧版本即使支持也可能漏判
实际生效的关键不在“怎么写属性”，而在“谁来承载它”和“背后有没有东西可模糊”。很多人卡在第一步就把滤镜加错位置，后面调再久也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
