应直接修改 .modal-backdrop 的 background-color 为 rgba() 格式（如 rgba(0, 0, 0, 0.3)），alpha 值控制透明度；改 opacity 无效，因 bootstrap 5+ 依赖背景色 alpha 通道而非元素透明度，且 opacity 易被内联样式覆盖、影响渲染稳定性。
直接改 .modal-backdrop 的 background-color，用 rgba() 写法，alpha 值控制透明度——改 opacity 或 .modal 上的样式都没用。
为什么改 opacity 没反应？
Bootstrap 5+ 的遮罩层渲染依赖 background-color: rgba(0, 0, 0, 0.5)，不是靠元素级 opacity。后者会作用于整个节点（虽然没子节点，但 JS 动态插入时可能受干扰），且容易被内联样式覆盖。浏览器开发者工具里如果看到 computed 的 background-color 是 rgb(0, 0, 0) 或 #000，说明 alpha 值根本没生效。
.modal-backdrop 样式写在哪才真正起效？
必须确保三点同时满足：
- 你的 CSS 文件在 Bootstrap 官方 CSS 之后加载（顺序错，规则被盖掉）
- 选择器权重足够：直接用
.modal-backdrop即可，但加!important更稳妥（Bootstrap 5.2+ 常通过 JS 插入内联样式） - 遮罩层真实存在：检查 HTML 中是否写了
data-bs-backdrop="false"，或者 JS 初始化时传了backdrop: false—— 这种情况下 DOM 根本不生成.modal-backdrop节点，样式再对也无目标
用 CSS 变量方式（Bootstrap 5.3+ 推荐）
如果你用的是 Bootstrap 5.3 或更新版本，优先走变量方案，更干净、不依赖 !important：
:root {
--bs-backdrop-bg: rgba(0, 0, 0, 0.3);
}
注意：--bs-backdrop-bg 只在 backdrop 启用时生效（即未设 data-bs-backdrop="false"）；变量值必须是字符串格式的 rgba()，hsla() 或十六进制都不识别。
容易被忽略的 body 偏移问题
Modal 弹出时，Bootstrap 会给 body 加 modal-open 类并设 overflow: hidden，导致右侧滚动条消失、内容右移约 17px。很多人误以为这是遮罩颜色或透明度引起的“抖动”，其实是布局突变。要真正让页面不跳，得同步加：
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}
这段必须和 .modal-backdrop 样式一起用，否则即使背景调浅了，页面还是会“跳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
