Modal遮罩层的CSS选择器是什么
目标选择器是 `.modal-backdrop`。它不像某些组件那样依赖内联样式，而是完全由CSS控制。默认值为半透明的黑色（约等于 `rgba(0,0,0,0.5)`），但你可以直接覆盖它的 `background-color` 属性。
需要特别注意：不要试图通过修改 `data-bs-backdrop` 来调整颜色，它只有三个可选值——`true`、`false`、`"static"`。颜色调整必须通过CSS实现。
如何用CSS覆盖默认遮罩色
直接为 `.modal-backdrop` 编写一条 `background-color` 规则即可。不过有两个方面需要留意：一是优先级要足够高，二是透明度需手动处理（因为Bootstrap默认使用rgba，建议你也采用rgba方式）。
- 如果只想更换颜色而不改变透明度，使用 `rgba(128, 192, 255, 0.7)` 这类写法，不要用 `opacity`——它会影响整个backdrop元素，包括可能插入的子内容。
- 推荐添加 `!important`。Bootstrap的CSS通常在你的自定义样式之后加载，不加 `!important` 容易被覆盖。
- 如果项目使用Sass/SCSS，可以在变量重定义后重新编译，但最简便的方法还是直接通过覆盖CSS来实现。
.modal-backdrop { background-color: rgba(79, 70, 229, 0.6) !important;}
为什么有时候改了没生效
常见原因并非代码错误，而是加载顺序或作用域出了问题：
- CSS文件引入顺序不对：你的样式必须在Bootstrap CSS之后加载。
- 使用了 `data-bs-backdrop="false"` —— 此时不会生成 `.modal-backdrop` 元素，自然无法修改。
- Modal是动态创建的（例如通过 `new bootstrap.Modal()` 调用），但你的CSS没有全局生效，而是被限制在某个组件内部（Vue或React的scoped样式容易出现这种情况）。
- 某些UI库（如BootstrapVue、React-Bootstrap）会封装或替换原生的backdrop渲染逻辑，此时类名可能不同，需要用浏览器开发者工具检查实际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。
在实际项目中，最容易忽略的是：改完CSS后没有清理浏览器缓存，或者误以为 `data-bs-backdrop` 可以传递颜色值——它真的不能，它只是一个开关。记住这一点，就能避开陷阱。
