应覆盖 .modal-backdrop 类的 background-color，推荐用高优先级选择器如 .modal-backdrop.show 或主题 class 层叠，保持 alpha 值一致，避免 !important 干扰交互逻辑。
修改 modal-backdrop 的 css 类样式
bootstrap 的模态框遮罩层是独立的 dom 元素，类名为 modal-backdrop，它不是 .modal 的子元素，而是兄弟节点。直接改 .modal 里的 background-color 没用。
最稳妥的方式是覆盖它的 background-color，但要注意优先级和作用域：
- 必须用足够强的选择器，比如
.modal-backdrop或.modal-backdrop.show - 如果用 Sass 编译自定义 Bootstrap，推荐在变量层改
$modal-backdrop-bg - 若只改个别模态框，可加自定义 class（如
my-modal），再写.my-modal + .modal-backdrop
示例（CSS）：
.modal-backdrop {
background-color: #1e3a8a; /* 深蓝替代默认黑 */
}
避免被 !important 锁死或重复覆盖
常见错误是全局加 !important，结果后续 JS 动态控制透明度（如 fade 动画）失效，或者和 Bootstrap 5.3+ 的 data-bs-backdrop 行为冲突。
真正要改的是颜色值本身，而不是强行覆盖所有属性：
- 不要写
background: rgba(0,0,0,.5) !important—— 这会干扰data-bs-backdrop="static"下的交互逻辑 - Bootstrap 5 默认用
rgba(0, 0, 0, 0.5)，改颜色时建议保持 alpha 值（如rgba(30, 58, 138, 0.5)），否则遮罩可能过亮或过暗 - 检查是否引入了多个 Bootstrap 版本，旧版 CSS 可能覆盖你的新规则
动态切换遮罩颜色（比如主题切换）
如果需要运行时改颜色（例如深色/浅色主题），别用 document.styleSheets 注入 CSS，容易漏掉重绘。更可靠的做法是操作 class：
- 给
加主题 class，如theme-dark - 用 CSS 层叠：
.theme-dark .modal-backdrop { background-color: #2d3748; } - JS 切换时只需
document.body.classList.toggle('theme-dark')，无需手动操作 DOM 节点 - 注意：
.modal-backdrop是 JS 插入的，确保主题 class 在show()前已存在，否则首次弹出可能用错颜色
Bootstrap 4 和 5 的关键差异点
Bootstrap 5 移除了 jQuery 依赖，遮罩层插入逻辑变了，但类名没变 —— 所以 CSS 覆盖方式依然有效。真正影响你的是：
- BS4 默认用
background-color: #000+opacity: .5；BS5 改用rgba()单属性，更利于颜色微调 - BS5 中
data-bs-backdrop="false"会彻底不渲染.modal-backdrop，此时你写的样式自然无效 - 如果你用的是
bootstrap.min.css且没源码，就老老实实写高优先级 CSS；有源码的话，改_variables.scss里的$modal-backdrop-bg更干净
改颜色这事本身不难，难的是改完后 modal 还得正常关闭、键盘 ESC 有效、点击遮罩仍能退出——这些都依赖原始 backdrop 的事件绑定机制，所以别删 class，别动结构，只动 color。
