直接修改 .modal-backdrop 的 background-color: rgba(0, 0, 0, 0.1) !important 即可生效；遮罩不透明通常是未启用 backdrop、alpha 值错误或元素未渲染，而非 CSS 错误。
直接改 .modal-backdrop 的 background-color 为 rgba(0, 0, 0, 0.1) 并加 !important 就能生效；但若遮罩“看起来不透明”，大概率是没启用 backdrop、alpha 值写成 1 或漏了小数点，不是 CSS 写错了。
为什么改 opacity 没用
Bootstrap 5+ 的 .modal-backdrop 是靠 background-color: rgba() 控制明暗的，opacity 只影响整个元素渲染层级，且容易被 JS 插入的内联样式覆盖。更关键的是：它会让遮罩层（哪怕空着）仍占据视觉权重，而你真正想调的是“透出多少底下内容”——这由 rgba 的 alpha 决定。
-
opacity: 0.2→ 整个遮罩层变淡，但 background-color 还是rgba(0,0,0,0.5)，最终叠加效果不可控 -
background-color: rgba(0, 0, 0, 0.1)→ 明确告诉浏览器“只透出 10% 黑色”，底下页面内容自然显多 - 开发者工具里检查 computed
background-color，如果显示rgb(0, 0, 0)或#000，说明 alpha 被丢掉了
.modal-backdrop 样式必须带 !important
Bootstrap 5.2+ 默认用内联样式或 CSS 变量设置 background-color，普通 CSS 规则权重不够。不加 !important，你的规则很可能被忽略。
- 正确写法：
.modal-backdrop { background-color: rgba(0, 0, 0, 0.05) !important; } - 别写成
background: rgba(...)—— 简写会重置background-image等潜在属性，虽 backdrop 不用，但留坑 - 数值可调：
0.0是完全透明（但需同步处理 body 偏移），0.08是极浅灰，0.2是轻度压暗
确认 .modal-backdrop 元素真实存在
很多情况下“改了没反应”，根本原因是 DOM 里压根没生成这个节点——不是样式问题，是逻辑没触发。
- 检查 HTML 中是否写了
data-bs-backdrop="false"，写了就等于禁用，样式再对也无效 - 在模态框弹出后打开开发者工具，搜索
.modal-backdrop，确认它出现在<body>底层且未被display: none或opacity: 0隐藏 - SPA 场景下（如 React/Vue 动态挂载），
.modal-backdrop可能延迟插入或挂载到非body下，此时你的 CSS 选择器可能匹配不到
想彻底隐藏遮罩？光调透明度不够
设 background-color: rgba(0, 0, 0, 0) 或 opacity: 0 后，body 仍会保留 modal-open 类，导致滚动条消失、右侧留白。必须一并修复：
- 清空遮罩视觉：
.modal-backdrop { opacity: 0 !important; } - 恢复 body 滚动：
body.modal-open { overflow-y: auto !important; padding-right: 0 !important; } - 如果
.modal-content本身有白底，记得设background-color: transparent，否则看起来还是“有遮罩”
最容易被忽略的，是没在 modal 弹出后验证 .modal-backdrop 是否真被渲染出来——尤其在嵌套路由或动态组件中，它可能延迟生成、挂载位置异常，或者被第三方插件拦截。光看 CSS 文件对不对，解决不了问题。
