Modal遮罩层的CSS类名是.modal-backdrop，它是独立于.modal的兄弟元素，需直接覆盖其background-color（推荐rgba()写法）才能修改遮罩色值与透明度，改.modal或.modal-content无效。
Modal 遮罩层的 CSS 类名是什么
Bootstrap 的 Modal 遮罩层（backdrop）默认由一个 .modal-backdrop 元素渲染，它是一个独立于 .modal 的兄弟节点，位于 .modal 外部、<body> 内部。修改它的样式，**不能通过修改 .modal 自身的 CSS 属性实现**，必须直接针对 .modal-backdrop 选择器。
如何覆盖默认的 backdrop 色值和透明度
Bootstrap 5+ 使用 rgba(0, 0, 0, 0.5) 作为 .modal-backdrop 的背景色，其中透明度由 alpha 值（0.5）控制。要修改它，只需在你的自定义 CSS 中重写该类的 background-color：
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.7); /* 深一点的灰黑遮罩 */
}注意：!important 通常不需要——只要你的 CSS 文件在 Bootstrap CSS 之后加载，且选择器权重不弱于原生规则（.modal-backdrop 权重已足够），就能生效。
- 若使用 Sass/SCSS，可直接覆写变量
$modal-backdrop-bg和$modal-backdrop-opacity（Bootstrap 5.3+ 支持） - 动态创建的 Modal（如 JS 调用
new bootstrap.Modal(...)）也会插入新的.modal-backdrop元素，因此全局样式依然有效 - 避免用
background: #000这种纯色——会丢失透明度，遮罩变成不透明黑块
为什么改了 CSS 却没生效
常见失效原因不是代码写错，而是加载顺序或作用域问题：
- CSS 文件被 Bootstrap 官方 CSS 后加载，但被其他更高权重的选择器（如
body .modal-backdrop或内联 style）覆盖 - 使用了 CSS-in-JS 库（如 Emotion、Styled Components），未将样式注入到全局作用域，导致
.modal-backdrop（由 Bootstrap JS 动态插入）无法匹配 - 项目启用了 Shadow DOM 或 scoped style（如 Vue 单文件组件中
<style scoped>），而.modal-backdrop插入在<body>下，不在组件作用域内 - 检查浏览器开发者工具：确认元素上是否真有
.modal-backdrop类，以及 computed 样式中background-color是否被 override
透明度变化对点击穿透的影响
Backdrop 的透明度本身不影响点击穿透逻辑——Bootstrap 通过 pointer-events: none 控制遮罩层是否响应点击。但要注意：
-
.modal-backdrop默认有pointer-events: none，所以即使你把透明度设为0，它也不会“消失”，只是看不见；反之，设为1也不代表能点透——它仍不响应事件 - 真正决定是否关闭 Modal 的是 backdrop 点击行为，由
data-bs-backdrop="true"（默认）或backdrop: true（JS 初始化参数）控制，与颜色/透明度无关 - 若想让遮罩层可点击（比如自定义关闭逻辑），需手动加
pointer-events: auto，并监听click事件，此时透明度设太低（如 0.1）可能造成用户误点不到
改 backdrop 就是改一个 class 的 background-color，别绕远；但得看清它在哪、谁插的、谁管的——否则调半天 alpha 值，发现根本没刷出来。
