要修改bootstrap遮罩层颜色，必须直接设置.modal-backdrop的background-color为rgba()格式（如rgba(79, 70, 229, 0.4)），或在bootstrap 5.3+中通过:root{--bs-backdrop-bg:rgba(...)}定义css变量；同时需确认data-bs-backdrop未设为false、元素已动态生成且无更高优先级样式覆盖。
直接改 .modal-backdrop 的 background-color 才生效
Bootstrap 的遮罩层是独立 DOM 元素，类名就是 .modal-backdrop，它和 .modal 是兄弟关系，不是子元素。改 .modal 或 .modal-content 的背景色完全无效。
必须显式覆盖 .modal-backdrop 的 background-color，且只能用 rgba() 写法（比如 rgba(79, 70, 229, 0.4)），不能只写 rgb() 或十六进制（如 #4f46e5）——浏览器会当不透明处理，遮罩就“实心”了。
-
alpha值（如0.4）控制深浅：调高变亮、调低变暗 - 别动
opacity属性：它会影响整个.modal-backdrop节点，包括未来可能插入的子内容 - 推荐加
!important：Bootstrap 5+ 默认用内联样式或 CSS 变量，普通规则容易被覆盖
Bootstrap 5.3+ 优先用 CSS 变量 --bs-backdrop-bg
如果你用的是 Bootstrap 5.3 或更新版本，--bs-backdrop-bg 是更干净的方案：不用 !important，也不怕 JS 动态样式覆盖。
在 :root 或特定容器上设置即可：
:root {
--bs-backdrop-bg: rgba(79, 70, 229, 0.4);
}
注意三点：
- 变量值必须是
rgba()字符串，hsla()或十六进制都不识别 - 只在
data-bs-backdrop="true"（或未设该属性）时生效；设成"false"就压根不渲染.modal-backdrop - 局部定制可加 class：
.my-theme .modal-backdrop+ 变量声明，但得确认作用域包裹到实际插入位置（SPA 中可能挂载在外）
为什么改了颜色却没变？先确认这三件事
常见“改了但无效”，往往不是 CSS 写错，而是底层条件没满足：
-
data-bs-backdrop="false"：这层 DOM 根本不会生成，样式再对也无用 - 浏览器开发者工具里检查
.modal-backdrop元素是否真实存在——它由 JS 动态插入，需在 modal 弹出后刷新检查 - 引入了多个 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 节点 - 确保主题 class 在
show()前已存在，否则首次弹出可能用错颜色
.modal-backdrop 是否存在、是否启用、是否被更高权重规则压制——这三个点漏一个，CSS 再准也没用。
