Bootstrap 5.2+ 才内置 bg-transparent 类；5.0/5.1 中不存在，需手动添加；该类仅设 background-color: transparent，不影响文字颜色，真透明文字需用 style="color: transparent" 或自定义 CSS。
Bootstrap 里没有 bg-transparent 类？先确认版本
Bootstrap 5.2+ 才正式内置 bg-transparent 和 text-transparent 工具类；如果你用的是 Bootstrap 5.0 或 5.1，这些类默认不存在——直接写会无效。检查方法：
console.log(getComputedStyle(document.body).backgroundColor);然后在浏览器开发者工具里搜
.bg-transparent 是否被加载。
bg-transparent 只作用于背景，不能让文字变透明
这个类只设置 background-color: transparent，不影响 color 或 opacity。想让文字“隐形”，得另配：
- 用
text-white+bg-dark搭配视觉隐藏（非真透明） - 真透明文字需手动加
style="color: transparent"或自定义 CSS - 误用
bg-transparent给文字容器（如<span>）不会改变字体颜色
想用 RGBA / HEXA 颜色但 Bootstrap 不支持？自己补
Bootstrap 的颜色工具类（如 bg-primary）只生成不透明色值，#00000080 或 rgba(0,0,0,0.5) 不会被自动识别。解决办法：
- 直接在 HTML 中写内联样式：
style="background-color: #00000040" - 在自定义 CSS 中扩展：
.bg-black-20 { background-color: rgba(0, 0, 0, 0.2) !important; } - 避免覆盖原生类：不要重写
.bg-transparent，它已有明确语义
透明叠加时 z-index 和 pointer-events 容易被忽略
用 bg-transparent 做遮罩层（比如模态框 overlay）时，常见问题不是颜色，而是交互失效：
立即学习“前端免费学习笔记（深入）”；
- 没设
z-index→ 被底层元素挡住 - 没设
pointer-events: none→ 拦截了下方按钮点击 - 推荐组合写法：
<div class="bg-transparent position-fixed w-100 h-100" style="z-index: 1050; pointer-events: none;"></div>
