应直接修改.modal-backdrop的background-color，使用rgba()并加!important（bootstrap 5+需高优先级），或bootstrap 5.3+推荐用css变量--bs-backdrop-bg；须确认data-bs-backdrop未设为false且元素真实存在。
直接改 .modal-backdrop 的 background-color 才生效
Bootstrap 的遮罩层是独立 DOM 元素，类名为 .modal-backdrop，它和 .modal 是兄弟关系，不是子元素。改 .modal 或 .modal-content 的背景色完全无效。
必须用 CSS 显式覆盖 .modal-backdrop 的 background-color，且推荐用 rgba() 写法，比如：
.modal-backdrop {
background-color: rgba(79, 70, 229, 0.4) !important;
}
- 不写
!important很可能被 Bootstrap 5+ 的内联样式或 CSS 变量覆盖 - 不能只写
rgb(79, 70, 229)或#4f46e5—— 浏览器会当不透明处理，遮罩就“实心”了 - alpha 值（如
0.4）控制深浅，调高变亮、调低变暗，别动opacity属性，它会影响整个 backdrop 节点（包括未来可能插入的子内容）
用 CSS 变量 --bs-backdrop-bg 更干净（Bootstrap 5.3+）
如果你用的是 Bootstrap 5.3 或更新版本，优先走变量方案，不用 !important，也不怕被 JS 动态样式覆盖。
在 :root 或特定容器上设置即可：
:root {
--bs-backdrop-bg: rgba(79, 70, 229, 0.4);
}
- 这个变量只在
data-bs-backdrop="true"（或未设该属性）时生效；设成"false"就压根不渲染.modal-backdrop，变量也无用 - 变量值必须是
rgba()字符串，hsla()或十六进制都不识别 - 局部定制可加 class：
.my-theme .modal-backdrop+ 变量声明，注意作用域是否包裹到实际插入位置（SPA 中可能挂载在body外）
为什么改了颜色却没变？先确认这三件事
常见“改了但无效”，往往不是 CSS 写错，而是底层条件没满足：
-
data-bs-backdrop="false"在 HTML 或 JS 初始化里写了 —— 这时.modal-backdrop根本不会生成，样式再对也没节点可应用 - 浏览器开发者工具里搜不到
.modal-backdrop元素？Modal 没真正 show 出来，或者被 JS 动态移除了（比如手动remove()），得在弹出后刷新检查 - 项目里混用了多个 Bootstrap 版本（比如 CDN 引了一个，npm 又装了一个），旧版 CSS 可能覆盖你的新规则，查 computed 样式看最终生效的是哪条
多层 Modal 或主题切换时的坑
动态场景下容易翻车，核心是“遮罩层是否真存在”和“样式是否及时作用”：
- 多层 Modal 同时打开时，Bootstrap 默认只维护一个
.modal-backdrop，但某些封装逻辑或手动触发方式会导致重复插入，视觉上变黑——这不是颜色问题，是多个半透层叠加，得统一禁用第二层的 backdrop：data-bs-backdrop="false"+data-bs-keyboard="false" - JS 主题切换时，别用
document.styleSheets注入新 CSS，容易漏重绘；更稳的做法是给body切换 class：document.body.classList.toggle('theme-dark')，然后靠层叠：.theme-dark .modal-backdrop { background-color: rgba(45, 55, 72, 0.4); } - 确保 class 在
show()前已存在，否则首次弹出仍用旧色值
.modal-backdrop 可能被插到不可见位置，或延迟生成。光看 CSS 文件对不对没用，得在 modal 弹出瞬间打开开发者工具，亲眼确认那个 div.modal-backdrop 是否真实存在、是否被你写的样式命中。
