直接修改 .modal-backdrop 的 background-color 即可，但须用 rgba() 写法并确保选择器权重足够；遮罩层是独立 DOM 元素，与 .modal 为兄弟关系，改后者无效；推荐用 CSS 变量 --bs-backdrop-bg 覆盖，或使用 .modal-backdrop.show { background-color: rgba(...) !important; }。
直接改 .modal-backdrop 的 background-color 就行，但必须用 rgba() 写法并确保选择器权重足够——否则样式会被 bootstrap 的内联样式或 css 变量覆盖。
为什么改 .modal 或 .modal-dialog 没用
遮罩层是独立 DOM 元素，类名为 .modal-backdrop，和 .modal 是兄弟关系，不是子元素。你在 .modal 上设 background-color 或调 z-index，对遮罩层完全无影响。
- 浏览器开发者工具里搜索
.modal-backdrop，确认它真实存在（尤其 SPA 场景下可能延迟插入） - 如果 HTML 中写了
data-bs-backdrop="false"，这个元素压根不会生成，所有相关 CSS 都无效 - Bootstrap 5.3+ 默认用 CSS 变量
--bs-backdrop-bg控制颜色，普通规则容易被绕过
改颜色的两种可靠写法（推荐后者）
优先用 CSS 变量覆盖，干净、可维护、不依赖 !important：
:root {
--bs-backdrop-bg: rgba(30, 58, 138, 0.5); /* 深蓝 + 半透 */
}
若用传统 CSS（兼容旧版或局部覆盖），必须带 !important 且选中已渲染的实例：
.modal-backdrop.show {
background-color: rgba(30, 58, 138, 0.5) !important;
}
- 别只写
.modal-backdrop—— Bootstrap 有时靠.show类触发显示，没这个类可能不生效 - 必须用
rgba()，写#1e3a8a或rgb()会丢失透明度，变成不透明黑块 - Alpha 值建议保持在
0.2–0.7区间：低于0.15视觉隔离失效；高于0.8容易压抑内容
多次点击后颜色变深？那是多个 .modal-backdrop 叠加了
常见于手动反复调用 show()、用 .load() 动态加载模态框内容，或隐藏时只调 hide() 没清理 DOM 的场景。每个打开操作都新增一个遮罩层，堆叠后视觉上就“加深”了。
- 最稳妥解法：在触发按钮上加
data-bs-backdrop="static"或"false"，从源头禁用自动插入 - 若需保留遮罩逻辑，监听隐藏事件并清理：
$('#myModal').on('hidden.bs.modal', () => $('.modal-backdrop').remove()) -
hide()方法只隐藏不删除 DOM，remove()才真正清掉——这点极易被忽略
改完颜色后页面“跳一下”？那是 body 滚动条偏移在作怪
Bootstrap 打开模态框时会给 body 加 modal-open 类，并设 overflow: hidden，导致右侧滚动条消失、内容右移约 17px。这和遮罩颜色无关，但用户感知上常被混为一谈。
- 必须同步修复：
body.modal-open { overflow-y: auto !important; padding-right: 0 !important; } - 如果遮罩设为全透明（
opacity: 0），但没修body行为，页面依然会“抖” - 这个偏移问题比颜色本身更难排查，尤其在嵌套路由或动态组件中
