必须修改 .modal-backdrop 的 background-color 为 rgba() 格式，因 Bootstrap 4 遮罩透明度由背景色 alpha 值控制，opacity 会影响子节点、易被覆盖且移动端兼容差；直接设 opacity: 0.3 无效是因为 background-color 退化为无 alpha 的 rgb() 或 #000，导致遮罩变实心；需用 !important 确保样式生效，并检查 DOM 中 .modal-backdrop 是否真实存在、CSS 加载顺序是否正确、是否误设 data-backdrop="false"，同时修复 body.modal-open 的滚动条偏移问题。
不能用 opacity，必须改 .modal-backdrop 的 background-color 为 rgba() 格式——Bootstrap 4 的遮罩层透明度完全由背景色 alpha 值控制，opacity 会连带影响未来可能插入的子节点（虽目前无，但 JS 动态行为不可控），且易被内联样式覆盖。
为什么直接设 opacity: 0.3 没反应
Bootstrap 4 的 .modal-backdrop 是通过 background-color: rgba(0, 0, 0, 0.5) 实现半透明的，不是靠元素级 opacity。你加 opacity: 0.3 后，computed 样式里 background-color 仍是 rgb(0, 0, 0)（alpha 丢失），浏览器就当它是不透明黑块。开发者工具里看到 background-color 是纯 rgb() 或 #000，说明 alpha 没生效。
- 别写
background-color: #000或rgb(0, 0, 0)—— 这俩都没 alpha 通道，遮罩变实心 - 别依赖
opacity调深浅：它作用于整个 DOM 节点，非仅背景；移动端 WebView 对opacity重绘有兼容问题 - Bootstrap 4 不支持
--bs-backdrop-bg变量（那是 5.3+ 才有的），只能走 CSS 覆盖路径
.modal-backdrop 样式必须加 !important
Bootstrap 4 的 CSS 文件通常在你自定义样式之前加载，且其默认规则权重足够（.modal-backdrop 本身已够），但 JS 初始化时可能注入内联 style（如某些插件或动态 modal 场景），导致普通声明被覆盖。加 !important 是最稳妥的兜底方式。
- 正确写法：
.modal-backdrop { background-color: rgba(0, 0, 0, 0.2) !important; } - alpha 值建议范围：0.15–0.7；低于 0.15 视觉隔离失效，高于 0.7 容易误判为页面故障
- 若用 Sass/SCSS，可覆写变量
$modal-backdrop-bg和$modal-backdrop-opacity后重新编译，但纯 CSS 场景下无需这么重
确认遮罩层真实存在且 CSS 加载顺序正确
“改了没效果”十有八九不是代码错，而是底层条件缺失。打开 DevTools，在 modal 弹出后检查 <div class="modal-backdrop"> 是否真实存在于 <code> 下——它由 JS 动态插入，未弹出时 DOM 里根本没有。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中是否写了
data-backdrop="false"（Bootstrap 4 用data-backdrop，不是data-bs-backdrop）——写了就根本不会生成该元素 - 确认你的 CSS 文件在
bootstrap.min.css之后加载；若用构建工具（如 Webpack），确保 style-loader 插入顺序正确 - 若在 Vue/React 单文件组件中写
<style scoped></style>，则选择器无法命中挂载到下的.modal-backdrop，得改用<style></style>全局作用域或:global(.modal-backdrop)
别漏掉 body 滚动条偏移这个“假透明”问题
Modal 弹出时，Bootstrap 4 会给 body 加 modal-open 类并设 overflow: hidden，导致右侧滚动条消失、内容右移约 17px。用户常误以为这是遮罩太暗或透明度异常引起的“抖动”，其实是布局突变。
要让页面真正稳定，必须同步修复：
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}
这段和 .modal-backdrop 样式是绑定关系：哪怕你把遮罩调成 rgba(0, 0, 0, 0.05)，不加这段，页面照样“跳”。
