Modal遮罩层的CSS选择器是.modal-backdrop，它是独立于.modal的兄弟元素，需通过覆盖其background-color（推荐用rgba()并加!important）来修改颜色，而非调整data-bs-backdrop属性或.modal样式。
Modal遮罩层的CSS选择器是什么
bootstrap modal的背景遮罩（backdrop）默认是半透明黑色，它不是通过 data-bs-backdrop 属性控制颜色，而是由一个独立的 .modal-backdrop 元素渲染，位于 .modal 外层。这个元素没有内联样式，完全靠css控制。
关键点：不能改 data-bs-backdrop 的值来调色，它只接受 true、false 或 "static"；颜色必须走CSS。
如何用CSS覆盖默认遮罩色
直接给 .modal-backdrop 设置 background-color 即可，但要注意两点：一是优先级要足够高，二是透明度需手动控制（因为默认用的是 rgba 值）。
- 如果只想改颜色不改透明度，用
rgba(128, 192, 255, 0.7)这类写法，避免用opacity——它会影响整个 backdrop 元素（包括可能插入的子内容） - 推荐加
!important，因为 Bootstrap 的 CSS 通常在你自定义样式之后加载，不加容易被覆盖 - 若使用 Sass/SCSS，可在变量重定义后重新编译，但最简单方式仍是覆盖式 CSS
.modal-backdrop {
background-color: rgba(79, 70, 229, 0.6) !important;
}
为什么有时候改了没生效
常见失效原因不是代码写错，而是作用域或加载顺序问题：
- CSS 文件引入顺序不对：你的样式必须在 Bootstrap CSS 之后加载
- 用了
data-bs-backdrop="false"—— 此时根本不会生成.modal-backdrop元素，自然改无效 - Modal 是动态创建的（比如通过 JS 调用
new bootstrap.Modal()），但你的 CSS 没全局生效，而是 scoped 到某个组件内部（Vue/React 中尤其容易） - 某些 UI 库（如 BootstrapVue / React-Bootstrap）会封装或替换原生 backdrop 渲染逻辑，此时类名可能不同，得 inspect 元素确认真实 class
要不要用 JavaScript 动态改遮罩色
一般没必要。CSS 已足够灵活，且更轻量。但如果确实需要按场景切换（比如深色模式下换遮罩色），可以：
- 预设多套 class，如
.backdrop-primary、.backdrop-dark，再用 JS 切换document.body或document.documentElement上的 class - 避免直接操作
document.querySelector(".modal-backdrop")—— 因为 backdrop 元素是动态增删的，时机难把握，容易报错或漏改 - 如果 Modal 是单例复用，可在
shown.bs.modal事件里临时加 style，但记得在hidden.bs.modal里清理，否则残留样式会影响下一个 Modal
data-bs-backdrop 能传颜色值——它不能，那只是开关。
