必须直接修改 .modal-backdrop 的 background-color 才生效，推荐用 rgba() 格式并加 !important；bootstrap 5.3+ 优先使用 --bs-backdrop-bg 变量，值须为 rgba() 字符串，且仅在 data-bs-backdrop 未设为 "false" 时生效。
直接改 .modal-backdrop 的 background-color 才生效
Bootstrap 5+ 的遮罩层是独立 DOM 元素，和 .modal 并列，不是它的子节点。你在 .modal 或 .modal-content 上设透明度、背景色、z-index，对遮罩层完全没影响。
必须显式覆盖 .modal-backdrop 的 background-color，且只能用 rgba() 格式：
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.3) !important;
}
-
rgba(0, 0, 0, 0.3)中的0.3是 alpha 值，控制深浅：数值越小越淡（建议不低于0.15），越大越暗（不建议超过0.7） - 别写
rgb(0, 0, 0)或#000—— 没 alpha 通道，浏览器当纯黑不透明处理 - 别用
opacity: 0.3单独控制 —— 它作用于整个元素，未来若插入子内容（如动画占位符）会被一并变淡，且在某些 Android WebView 有重绘 bug -
!important几乎必加：Bootstrap 5+ 常通过 JS 插入内联样式或使用 CSS 变量，普通规则权重不够
用 --bs-backdrop-bg 变量更干净（Bootstrap 5.3+ 推荐）
如果你项目用的是 Bootstrap 5.3 或更新版本，优先走 CSS 变量方案。它不依赖 !important，也不怕被 JS 动态样式覆盖，维护性更好。
变量值必须是字符串格式的 rgba()（hsla() 或十六进制都不识别）：
:root {
--bs-backdrop-bg: rgba(79, 70, 229, 0.4);
}
- 这个变量只在 backdrop 启用时生效 —— 即 HTML 中没写
data-bs-backdrop="false"，或明确设为"true"/"static" - 若你用 SCSS 主题，也可以在变量文件里重定义
$modal-backdrop-bg，但需确保编译后注入顺序正确 - 旧版 Bootstrap（background-color +
!important路径
为什么改了但遮罩没变？先确认这三件事
“改了无效”大概率不是 CSS 写错，而是底层条件没满足：
-
data-bs-backdrop="false"在 HTML 或 JS 初始化里写了 —— 这时.modal-backdrop根本不会生成，样式再对也无节点可作用 - 打开浏览器开发者工具，在 modal 弹出后检查 DOM，确认
.modal-backdrop元素真实存在且被你的 CSS 规则命中（注意：它由 JS 动态插入，未弹出前查不到） - 你的自定义 CSS 文件是否在 Bootstrap CSS 之后加载？顺序反了，规则会被覆盖；若用 Vue/React，样式是否被
scoped或 shadow DOM 隔离？得确保选择器能命中全局插入的.modal-backdrop
别漏掉 body 滚动条偏移这个视觉“抖动”
Modal 弹出时，Bootstrap 会给 body 加 modal-open 类，并设 overflow: hidden，导致右侧滚动条消失、页面内容向右偏移约 17px。很多人误以为这是遮罩颜色问题，其实是布局突变。
要真正让页面不跳，必须同步修复：
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}
- 这段必须和
.modal-backdrop样式一起用，否则即使背景调得再浅，页面还是会“跳” - 如果 modal 内容本身带白底（如
.modal-content默认白色），而你又把遮罩调得很淡，可能造成对比不足、视觉隔离失效 —— 此时建议微调.modal-content的background-color或加轻微阴影增强层次
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
