直接改 background-color 会失效，因为 bootstrap 5.3+ 中 .badge 使用 background: var(--bs-badge-bg) 且 --bs-badge-bg 不含 alpha，background 简写属性优先级高于 background-color。
直接改 background-color 会失效？因为 badge 默认用 background 覆盖了透明度
bootstrap 的 .badge 类默认设置了不带 alpha 通道的纯色 background-color（比如 #0d6efd），你如果只写 background-color: rgba(13, 110, 253, 0.5)，它可能被后续更具体的规则覆盖，或者被 bootstrap 内置的 background 声明顶掉——尤其在 v5.3+ 使用 css 变量后，background 是直接拼出来的。
真正起效的方式是：用 background 属性本身覆盖，并确保选择器权重足够。例如：
.badge-transparent-primary {
background: rgba(var(--bs-primary-rgb), 0.3) !important;
}
这里用了 Bootstrap 5 的 CSS 变量（--bs-primary-rgb）配合 rgba() 构造带透明度的背景，!important 是为了压过默认的 .badge 规则（v5.3 默认用 background: var(--bs-badge-bg)，而 --bs-badge-bg 本身不含 alpha）。
不想用 !important？那就复写 CSS 变量
Bootstrap 5.3+ 允许你通过重定义 --bs-badge-bg 来统一控制背景，且无需 !important。但注意：这个变量必须在 .badge 规则生效前注入，推荐放在 的 <style></style> 中，或自定义 SCSS 文件里。
例如，在 HTML 中插入：
<style>
.badge.opacity-20 {
--bs-badge-bg: rgba(var(--bs-primary-rgb), 0.2);
}
</style>
然后使用：<span class="badge bg-primary opacity-20">New</span>。这样既干净，又支持主题切换（只要 --bs-primary-rgb 更新，它就跟着变）。
常见误区：
- 试图用 Bootstrap 自带的
opacity-*工具类（如opacity-50）——它作用于整个元素，包括文字和边框，不是“背景透明” - 只改
background-color却没发现background属性优先级更高 - 在 SCSS 中覆盖变量时，漏写了
!default或加载顺序错，导致变量未生效
v4 和 v5 的处理方式差异很大
Bootstrap 4 没有 CSS 变量，.badge 直接写死 background-color，所以你可以安全地覆盖：
.badge.bg-primary.translucent {
background-color: rgba(13, 110, 253, 0.4);
}
而 Bootstrap 5.3+ 引入了 --bs-badge-bg 变量，且 background 属性值为 var(--bs-badge-bg)，此时只改 background-color 完全无效——因为 background 是 shorthand，会把 color、image、position 等全重置，覆盖掉你单独设的 color。
简单判断方法：打开 DevTools，选中 badge 元素，看 Computed 面板里 background 的来源是 var(--bs-badge-bg) 还是具体颜色值。
别忘了边框和文字颜色也要协调
降低背景透明度后，如果 badge 是浅色底（比如 bg-light）配深色文字，文字可能看不清；或者带边框的 badge（border 类）在半透背景下显得突兀。
建议同步调整：
- 用
text-dark或text-white显式指定文字颜色 - 若需边框，加
border border-[color]并手动调低边框 opacity（CSS 不支持border-opacity，得用rgba()写边框色） - 避免对
bg-transparent类直接叠加其他bg-*——多个背景类会冲突，Bootstrap 只认最后一个
透明度不是越低越好，0.2–0.4 是较稳妥的可读区间；低于 0.15 很容易被当成视觉噪音忽略。
