改opacity无效，因.offcanvas-backdrop依赖background-color:rgba()控制透出强度；应直接设rgba()背景色并加!important，或用CSS变量--bs-offcanvas-backdrop-bg。
直接改 .offcanvas-backdrop 的 background-color 为 rgba() 并加 !important 就能生效；90% 的“不透明”问题其实是遮罩根本没渲染出来，或 alpha 值写错了。
为什么改 opacity 没用
Bootstrap 5 的 .offcanvas-backdrop 是靠 background-color: rgba(0, 0, 0, 0.5) 控制视觉透出强度的。opacity 只影响整个元素的渲染层级，不仅容易被 JS 插入的内联样式覆盖，还会导致 iOS 下点击关闭失效——因为事件穿透区域没同步变弱。更关键的是：它让遮罩“看起来淡了”，但底层逻辑仍按原 alpha 值锁滚动、判点击，用户易误操作。
怎么真正调透明度
必须用 rgba() 显式声明背景色，并确保权重压过 Bootstrap 默认样式：
.offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.3) !important; }- Bootstrap 5.2+ 支持 CSS 变量：
:root { --bs-offcanvas-backdrop-bg: rgba(0, 0, 0, 0.3); }（无需!important，但需确认变量未被其他地方重定义） - alpha 值建议控制在
0.2–0.6之间；设为0时视觉消失，但body仍被锁滚动，必须同步加data-bs-backdrop="false" - 别写成
background: rgba(...)简写——它可能意外重置background-image或background-position
遮罩根本没出现？先检查这几点
很多“改了没反应”的情况，根源是 DOM 层面缺失：
立即学习“前端免费学习笔记（深入）”；
-
offcanvas容器没放在<body>直接子级——嵌套在.container或.row里会导致 backdrop 不生成或尺寸异常 - 触发按钮漏了
data-bs-toggle="offcanvas"，或没配对data-bs-target/href -
offcanvas元素没写data-bs-placement（如"start"或"end"），JS 初始化失败 - 手动加了
<div class="backdrop">——会和原生.offcanvas-backdrop叠加，造成双遮罩、z-index 冲突、iOS 卡顿 - SPA 场景下（如 React/Vue），
.offcanvas-backdrop可能延迟插入或挂载到非<body>下，CSS 选择器匹配不到
最常被忽略的是：改完 CSS 后没在模态框打开状态下用开发者工具确认 .offcanvas-backdrop 是否真实存在、是否被 display: none 或父容器的 overflow: hidden 截断——光看样式表，看不出问题在哪。
