bootstrap 5 默认 modal 背景遮罩不使用 backdrop-filter，仅靠 rgba 半透明色实现；如需模糊效果，须手动为 .modal-backdrop 添加 backdrop-filter: blur(8px) 并确保背景色与层级正确。
Modal 背景模糊是靠 backdrop-filter 实现的吗？
不是。Bootstrap 5 默认的 Modal 背景遮罩（即灰色半透明层）**完全不使用 backdrop-filter**，它只是个带 background-color: rgba(0, 0, 0, 0.5) 的普通 .modal-backdrop 元素。所谓“模糊效果”其实是误传——原生 Bootstrap 5 不提供背景模糊（blur）能力，连 CSS 层面的开关都没有。
想加背景模糊，必须手动覆盖 .modal-backdrop 样式
要实现真正意义上的背景虚化（比如让背后内容变模糊），得自己给 .modal-backdrop 加 backdrop-filter: blur(8px)，同时确保它能正确叠在内容上且不遮挡 Modal 本身。
- 必须设置
.modal-backdrop的z-index介于页面内容和.modal之间（默认.modal-backdrop是1050，.modal是1055，可保持不动） - 必须显式声明
background-color: rgba(0, 0, 0, 0.3)或类似值，否则纯backdrop-filter在无背景色时不可见 - 注意 Safari 旧版本（backdrop-filter，会直接降级为无模糊的半透层
- 示例 CSS：
.modal-backdrop.show {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); /* Safari 需前缀 */
background-color: rgba(0, 0, 0, 0.3);
}
为什么直接改 .modal 的 backdrop-filter 没用？
因为 .modal 自身是弹窗容器，它浮在 .modal-backdrop 之上；给 .modal 加 backdrop-filter，作用的是它「背后」的元素（通常是 ），但此时 已被 .modal-backdrop 盖住，实际看不到模糊效果。真正需要模糊的是 .modal-backdrop 所覆盖的那片区域，所以必须作用于它自身。
移动端 iOS 上模糊失效的常见原因
iOS Safari 对 backdrop-filter 有额外限制：父容器不能有 overflow: hidden、transform 或 will-change 等属性干扰合成层。如果 Modal 出现在一个 .container-fluid 或自定义 wrapper 里，而该 wrapper 恰好触发了这些属性，模糊就会消失。
- 检查
.modal-backdrop的任意父级是否含overflow: hidden（尤其是body或#app） - 避免在
body上设transform: translateZ(0)类增强渲染的 hack - 临时调试可加
body { -webkit-mask-image: none; }排除蒙版干扰
模糊不是开关式功能，它依赖渲染管线的合成能力，稍有布局干扰就静默失败。别只盯着 CSS 规则是否写对，更要盯住层叠上下文和父容器行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
