Offcanvas 容器无内置透明类，需手动覆盖 .offcanvas、.offcanvas-header、.offcanvas-body 的 background-color: transparent !important，并同步调整文字颜色与遮罩层显示。
Offcanvas 容器本身不支持透明背景类，但可以手动覆盖
Bootstrap 5 的 .offcanvas 默认带白色背景（background-color: #fff），它没有像 .bg-transparent 这样的内置透明工具类。想让它变透明，必须自己写 CSS 覆盖。
关键点在于：不能只改 .offcanvas，因为它的子容器如 .offcanvas-header、.offcanvas-body 也自带白色背景，漏掉任一层都会看到“白块”。
- 推荐直接在自定义样式中写：
.offcanvas { background-color: transparent !important; } .offcanvas-header, .offcanvas-body { background-color: transparent !important; } - 如果用了
.offcanvas-start等定位类，它们不带背景，无需额外处理 - 注意
!important在调试阶段建议保留——Bootstrap 的 CSS 权重高，普通选择器容易被覆盖 - 透明后若文字看不清，记得同步调整
.offcanvas-body a、.offcanvas-title的颜色和 opacity
用 bg-transparent 工具类对 Offcanvas 无效
.bg-transparent 是 Bootstrap 5 提供的通用背景透明工具类，但它只作用于“直接应用该 class 的元素”，而 .offcanvas 内部结构是嵌套的：header + body 分离渲染，工具类加在最外层不会穿透生效。
常见错误操作：
- 给
<div class="offcanvas offcanvas-start bg-transparent">加类——没用，body 仍是白底 - 只给
.offcanvas-body加bg-transparent——header 还是白的，顶部一条白杠明显 - 试图用
.bg-opacity-0（Bootstrap 5.2+ 新增）替代——它只降低不透明度，不是真透明，且同样不继承到子元素
透明 Offcanvas 的滚动与遮罩行为要单独处理
Offcanvas 默认启用背景遮罩（backdrop），并禁用 body 滚动。一旦设为透明，视觉上容易误判是否已激活；更关键的是，透明不等于“无交互”，遮罩和滚动锁定逻辑照常运行。
- 若想点击遮罩不关闭，加
data-bs-backdrop="false"到触发按钮或 offcanvas 标签 - 若希望页面能滚动（比如侧边栏内容很长），需同时设
data-bs-scroll="true"和data-bs-backdrop="false"，否则 body 仍被锁死 - 透明状态下，遮罩层（
.offcanvas-backdrop）默认是半黑（rgba(0,0,0,0.5)），如需隐藏它，得额外加：.offcanvas-backdrop { display: none; } - 注意：移除 backdrop 后，iOS Safari 可能出现滚动粘滞问题，建议测试真机
为什么不用 background-color: transparent 就失效？优先级和结构是主因
不是写错，而是 Bootstrap 的 CSS 规则权重太高，且多层嵌套导致“透明”被子元素背景覆盖。开发者工具里常看到：你写的 background-color: transparent 被划掉，实际生效的是 .offcanvas-body { background-color: #fff; } 这条规则。
- Bootstrap 5 的 offcanvas 样式表里，
.offcanvas-body带!important（v5.3.3 及以上版本），所以你的普通声明根本赢不了 - 不要依赖浏览器默认的
transparent值——CSS 初始化里它不保证，尤其在重置过样式的项目中 - 真正稳妥的做法是：用相同或更高权重的选择器，显式声明
background-color: transparent !important，并覆盖所有可能带背景的子类（.offcanvas-header、.offcanvas-body、甚至.offcanvas-title如果它有内联背景） - 别忘了检查是否有第三方插件或自定义主题注入了额外背景样式，它们可能藏在
style标签或 JS 动态插入的head中
