必须直接修改 .modal-backdrop 的 background-color 才能生效，推荐使用 rgba() 格式如 rgba(79, 70, 229, 0.4)，避免使用 rgb 或十六进制；Bootstrap 5.3+ 优先使用 --bs-backdrop-bg 变量设置。
直接改 .modal-backdrop 的 background-color 才生效
遮罩层是独立 DOM 元素，类名就是 .modal-backdrop，和 .modal 是兄弟关系，不是子元素。你在 .modal 或 .modal-content 上设背景色、透明度、z-index，对遮罩层完全没影响。
必须用 CSS 显式覆盖 .modal-backdrop 的 background-color，且推荐写成 rgba() 格式：
.modal-backdrop { background-color: rgba(79, 70, 229, 0.4) !important; }- 别写
rgb(79, 70, 229)或#4f46e5—— 浏览器会当不透明处理，遮罩就变成实心块了 - alpha 值（如
0.4）控制深浅：调高变亮，调低变暗；别动opacity属性，它会影响整个 backdrop 节点（包括未来可能插入的子内容） - 加
!important是因为 Bootstrap 5+ 常用内联样式或 CSS 变量，普通规则权重不够
--bs-backdrop-bg 变量方式（Bootstrap 5.3+ 推荐）
如果你用的是 Bootstrap 5.3 或更新版本，优先走 CSS 变量方案，更干净、不依赖 !important、也不怕被 JS 动态样式覆盖：
- 在
:root或特定容器上设置：:root { --bs-backdrop-bg: rgba(79, 70, 229, 0.4); } - 变量值必须是
rgba()字符串，hsla()或十六进制都不识别 - 这个变量只在启用 backdrop 时生效（即未设
data-bs-backdrop="false"） - 旧版本 Bootstrap（background-color 覆盖路径
为什么改了但没反应？先确认这三件事
“改了无效”往往不是 CSS 写错，而是底层条件没满足：
立即学习“前端免费学习笔记（深入）”；
-
data-bs-backdrop="false"在 HTML 或 JS 初始化里写了 —— 这时.modal-backdrop根本不会生成，样式再对也没节点可作用 - 浏览器开发者工具里检查，确认
.modal-backdrop元素真实存在且被选中——它由 JS 动态插入，需在 modal 弹出后刷新检查 - 你的自定义 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样式一起用，否则即使背景不暗了，页面还是会“跳” - 尤其在 SPA 嵌套路由或动态组件中，
.modal-backdrop可能被挂载到body外部或延迟生成，光看 CSS 是看不出问题的
