改 opacity 不起作用是因为 Bootstrap 5+ 依赖 background-color: rgba() 控制遮罩透明度，opacity 仅影响渲染层级且易被内联样式覆盖；应直接设置 rgba() 背景色或 CSS 变量 --bs-backdrop-bg。
直接改 .modal-backdrop 的 background-color 为 rgba() 并加 !important 就能生效，但漏写 alpha 值或没确认 backdrop 是否启用，改了也白改。
为什么改 opacity 不起作用？
Bootstrap 5+ 的 .modal-backdrop 默认用内联样式或 CSS 变量控制背景色，opacity 会作用于整个遮罩层元素（包括其子节点，虽然它没子节点），但更关键的是——它不改变背景色本身的透出强度，只影响渲染层级透明度；而 Bootstrap 实际依赖的是 background-color: rgba(0, 0, 0, 0.5) 这个值。用 opacity: 0.3 看似变淡，但可能被 JS 动态插入的高权重内联样式覆盖，且在某些嵌套路由下行为不稳定。
- 浏览器开发者工具里检查
.modal-backdrop元素，如果 computed 样式中background-color是rgb(0, 0, 0)或十六进制，说明你没写对rgba() - 如果
background-color显示为rgba(0, 0, 0, 0.5)但看起来不透明，大概率是 body 或父容器有白色背景透出，不是 backdrop 问题 - 确保 modal 触发时 DOM 中真有
.modal-backdrop节点——若用了data-bs-backdrop="false"，这层根本不会生成
怎么写才真正生效？
必须用 rgba() 显式声明背景色，并靠 !important 撑住权重。Bootstrap 5.2+ 支持 CSS 变量方式，更干净，但需确认项目已启用变量继承链。
- 传统写法：
.modal-backdrop { background-color: rgba(0, 0, 0, 0.3) !important; } - CSS 变量写法（推荐）：
:root { --bs-backdrop-bg: rgba(0, 0, 0, 0.3); }，无需!important，但要确保没有其他地方重定义该变量 - 别写成
background: rgba(...)简写——它可能意外重置background-image或background-position，虽 backdrop 通常不用这些，但留坑不划算
常见错误：改了但没反应
不是 CSS 写错了，而是环境没对齐。最常卡在这几个点：
立即学习“前端免费学习笔记（深入）”；
-
data-bs-backdrop="static"或"true"没设——默认值是true，但如果手动写了false或删掉了属性，.modal-backdrop根本不渲染 - 自定义主题或第三方插件覆盖了
--bs-backdrop-bg，且没用!important或变量优先级更高 - 用了 SCSS 编译但没把自定义 CSS 插入到 Bootstrap 主样式之后，导致权重不够
- 在 Modal 初始化前就注入样式——JS 还没挂载 backdrop 节点，CSS 提前生效但无目标可作用
真正要调透明度，盯住 background-color 和 --bs-backdrop-bg 这两个入口就行；其它路径要么绕远，要么埋雷。alpha 值建议控制在 0.2–0.6 之间，低于 0.2 容易误触底层内容，高于 0.6 会压制模态框主体可读性。
