<p>最稳方式是用 background-color 配合 rgba() 直接写死透明度，如 rgba(248, 249, 250, 0.8) 对应 bg-light 的半透效果；避免用 opacity 导致整容器变虚，Bootstrap 5.1+ 可用 bg-opacity- 类但须与 bg- 成对使用。</p>
用 background-color 配合 rgba() 直接写死透明度
bootstrap 本身不提供“半透明背景色”的预设类，bg-* 系列类（比如 bg-light）用的都是纯色 hex 或 named color，没法直接调透明度。最稳的方式是绕过类，自己写内联样式或自定义 css，用 rgba() 控制 alpha 通道。
常见错误是试图给 bg-light 加 opacity ——这会让整个容器（包括文字、子元素）一起变透明，不是“背景半透”，而是“整块发虚”。
-
rgba(248, 249, 250, 0.8)对应bg-light的背景色 + 80% 不透明度（即 20% 透明） -
rgba(222, 226, 230, 0.7)接近bg-secondary的柔和半透效果 - alpha 值别低于
0.6，否则文字在浅底上可读性会明显下降
用 Bootstrap 5 的 bg-opacity 工具类（仅限 v5.1+）
如果你用的是 Bootstrap 5.1 或更高版本，它悄悄加了 bg-opacity-* 类，但注意：它只对已带背景色的元素生效，且必须和 bg-* 组合使用，不能单独起作用。
典型错误是写成 class="bg-opacity-50" 单独用——没背景色，透明个寂寞；或者写成 class="bg-light bg-opacity-10"，结果背景淡到看不见字。
- 必须成对出现：
class="bg-light bg-opacity-75" - 支持的值只有
10、25、50、75、100（对应 0.1–1.0） - 不兼容 IE，且旧版 Bootstrap（v4 / v5.0）完全不识别这个类
避免用 opacity 覆盖整个容器
有人试过加 style="opacity: 0.8;"，看起来背景是淡了，但按钮、链接、图标全跟着模糊，交互反馈也弱了——这不是背景透明，是视觉降级。
真正需要的是“背景层独立透明”，文字和子组件保持 100% 不透明。除了 rgba() 和 bg-opacity-*，你还可以用伪元素模拟：
- 给容器加
position: relative - 用
::before伪元素铺一层rgba()背景，z-index: -1 - 这样内容永远在上层，不受透明影响
深色模式下 rgba 背景色不会自动适配
Bootstrap 5.3+ 支持深色模式，但 rgba() 值是硬编码的，不会随 data-bs-theme="dark" 切换而变。比如你在浅色模式下用了 rgba(255,255,255,0.9)，到了深色模式，它还是白底+透明，可能和深色文字打架。
解决办法有限：要么放弃自动适配，手动为深色模式写媒体查询；要么改用 CSS 自定义属性 + color-mix()（新特性，兼容性差）；更实际的做法是——在深色模式里直接换一套不依赖透明的背景方案，比如用 bg-dark 加轻微阴影代替。
半透明这事，看着简单，一动真格就卡在“要不要保文字清晰”“支不支持主题切换”“有没有老浏览器要照顾”这几个点上。别贪工具类，该手写 rgba() 就写，比猜类名靠谱。
