模态框背景模糊由 Bootstrap 5 的 .modal-backdrop 默认 backdrop-filter: blur(0.5rem) 导致，关闭需设为 none；覆盖方法包括 CSS 覆盖、Sass 变量重定义或 JS 动态移除，注意兼容性与视觉断层问题。
模态框背景模糊是 backdrop-filter 导致的，关掉它就行
Bootstrap 5 默认对 .modal-backdrop 使用了 backdrop-filter: blur(0.5rem)，这是背景变模糊的直接原因。它不是靠半透明遮罩层（rgba()）实现的，而是用滤镜叠加在背后的页面内容上——所以即使你调高 background-color 的 alpha 值，模糊依然存在。
关键点：这个模糊效果只在支持 backdrop-filter 的浏览器中生效（Chrome 76+、Safari 9+、Edge 79+），Firefox 默认禁用且无用户开关；如果你发现模糊没出现，可能只是浏览器不支持，而非 CSS 没生效。
覆盖默认 backdrop-filter 的三种可靠写法
不要试图用 !important 狂轰滥炸，优先走语义清晰、权重合理的覆盖路径：
- 在自定义 CSS 文件末尾添加：
.modal-backdrop { backdrop-filter: none; } - 如果用了 Sass/SCSS，重定义变量更干净：
$modal-backdrop-filter: none;
再重新编译 Bootstrap - 运行时动态移除（适合条件性控制）：
document.querySelector('.modal-backdrop')?.style.backdropFilter = 'none';
注意：仅设置 backdrop-filter: unset 或 initial 不一定生效，部分浏览器会 fallback 到默认值；none 是唯一明确关闭该特性的取值。
立即学习“前端免费学习笔记（深入）”；
关闭后要注意的视觉断层问题
去掉模糊后，.modal-backdrop 就只剩一层纯色遮罩（默认是 rgba(0, 0, 0, 0.5)）。这时如果模态框内容有白色背景、而底层页面也有大量白块，容易产生“粘连感”或边界不清。
- 建议同步微调遮罩透明度：
background-color: rgba(0, 0, 0, 0.4)让对比更柔和 - 若需保留一点“纵深感”，可用轻微阴影替代模糊：
.modal.show .modal-dialog { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } - 移动端 Safari 有个已知问题：设为
none后，有时仍残留极淡灰雾（非模糊），可加-webkit-backdrop-filter: none双保险
为什么不用 filter 替代 backdrop-filter？
filter 作用于元素自身及其所有子节点，给 .modal-backdrop 加 filter: blur(...) 不但模糊背景，还会把遮罩层自己的边缘、甚至模态框本体一起糊掉——完全不可控。而 backdrop-filter 专为“背后内容”设计，语义正确、影响范围精准。强行替换只会引入新 bug，得不偿失。
真正要小心的是：某些 UI 库或自定义主题可能在 .modal 或 body 上额外加了 backdrop-filter，此时只改 .modal-backdrop 不够，得 inspect 元素逐层排查。
