bg-transparent仅设background-color:transparent，无法覆盖.navbar-light等高优先级预设背景色，也不影响css变量或子元素透明度，仅适用于简单无嵌套场景。
bg-transparent 类本身只设 background-color: transparent，但它无法解决导航栏、徽章、模态框等组件的“伪不透明”问题——因为这些组件的背景色常来自父类、子元素或预设类的强制覆盖，不是单靠一个类就能穿透的。
为什么加了 bg-transparent 还是不透明？
常见于 .navbar 或 .badge：Bootstrap 5 的 .navbar-light、.navbar-dark、.badge-primary 等类内部自带 background-color 声明，优先级高于 bg-transparent。浏览器开发者工具里能看到它被划掉，但实际生效的是父类的背景。
- 检查是否同时用了
.navbar-light—— 它默认带background-color: #fff，会直接盖掉bg-transparent -
.badge的背景由--bs-badge-bg变量控制，而bg-transparent不修改该变量，只改自身元素的 background - 某些容器（如
.navbar-collapse）根本不继承父级背景，即使.navbar透明了，下拉菜单仍是“空背景”，透出底下内容
bg-transparent 和 opacity: 0 别混用
有人试过在同一个元素上既加 bg-transparent 又写 style="opacity: 0.8"，结果文字、图标、边框全变淡——这不是背景透明，是整块降级。真正要的是“仅背景层有 alpha，内容保持 100% 清晰”。
-
bg-transparent只影响 background-color，不影响子元素 -
opacity作用于整个元素及其所有后代，不可逆 - 需要半透背景 + 全 opaque 文字 → 必须用
rgba()或background-color: rgba(...)写死
哪些地方能放心用 bg-transparent？
它在简单场景下是有效的：比如给一个纯 <div class="bg-transparent"> 加边框或阴影，或作为卡片容器的“无底色基底”。但遇到嵌套深、预设类多的组件，就得绕开它。
<ul><li>可用：<code><div class="card bg-transparent border">（卡片无背景，只留边框）
<li>慎用：<code><nav class="navbar bg-transparent navbar-light"></nav>（navbar-light 会抢背景）
<span class="badge bg-transparent bg-primary"></span>（bg-primary 覆盖 bg-transparent）替代方案比硬顶 !important 更可持续
与其反复用 !important 强行压 Bootstrap 默认样式，不如用更可控的方式：
- 对导航栏：删掉
.navbar-light，只留.navbar，再用background-color: rgba(255, 255, 255, 0.1)直接写内联或自定义类 - 对徽章：用 CSS 变量构造，如
background: rgba(var(--bs-primary-rgb), 0.3)，避免和.badge-primary冲突 - 对下拉菜单：单独给
.navbar-collapse加bg-white或bg-body，别指望它自动继承
最易被忽略的一点：深色模式下 rgba(255,255,255,0.1) 在黑底上几乎看不见，而 bg-transparent 不会自动切换——它就是个静态声明，没感知能力。
