Bootstrap 5.3+仅保留opacity-0和opacity-100，移除了opacity-25/50等中间值；文字透明用text-opacity-，背景透明用bg-opacity-配合bg-*类。
Bootstrap 5 的 opacity- 类到底还有没有中间值？
没有。Bootstrap 5.3+（含当前最新稳定版）**只保留 opacity-0 和 opacity-100**，opacity-25、opacity-50 等类已被移除。这是官方明确的精简策略，不是你本地配置错了。
如果你在文档或旧项目里看到这些类生效，大概率是：
- 用了自定义编译的 Bootstrap（扩展了
$utilitiesmap） - 引入了第三方插件或旧版 CSS 文件混入
- 浏览器缓存了过期的 CDN 资源（比如 bootcdn.cn 上未及时更新的 5.2 版本）
验证方法：直接查官网 CSS 文件，搜索 opacity-50，结果为空。
想调文字/背景/容器透明度，该用哪个类？
必须按目标对象选对工具类，混用会失效或语义错乱：
- 整块容器（含子元素）变透明 → 用
opacity-0或opacity-100（仅这两个） - 仅文字透明、背景和子元素不变 → 用
text-opacity-25/text-opacity-50等（支持 10/25/50/75/100） - 仅背景色透明、文字保持不透明 → 用
bg-opacity-25配合bg-primary这类背景类（如bg-primary bg-opacity-50）
注意：bg-opacity- 类必须和 bg-* 类成对出现，单独写 bg-opacity-50 没效果；text-opacity- 类也必须搭配 text-* 颜色类（如 text-dark），否则颜色可能被重置为默认黑色。
为什么给导航栏加 opacity-0 后文字看不见，但背景还是白的？
因为 opacity-0 是作用于整个元素的 CSS opacity 属性，它会让**所有后代内容（包括文字、图标、子容器）完全透明**，但 Bootstrap 的 .navbar 默认有独立的 background-color，这个背景色不会“消失”，只是被透明内容盖住了视觉判断。
真正要实现“透明导航栏”，得走另一条路：
- 删掉
opacity-类，改用background-color: rgba(255, 255, 255, 0.8)（并加!important） - 显式清除干扰项：
background-image: none !important - 检查子容器（如
.navbar-collapse）是否自带白色背景，一并覆盖 - 滚动时动态切换状态？用 JS 切换预设 class，别在 scroll 事件里反复写内联样式
半透明背景图 + 不透明文字，别碰 opacity
直接给父容器加 opacity-50 是最常见错误——它会让文字、按钮、图标全变淡，根本不是“背景透、字清楚”。
正确做法是用 CSS background 多层叠加：
div.hero {
background: rgba(0, 0, 0, 0.4), url('/img/hero.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}关键点：
- 逗号前是上层遮罩（
rgba()），逗号后是下层图片（url()） - 不能拆成
background-color+background-image，否则后者会覆盖前者 -
background-size: cover和background-position: center必须显式声明，不然图片易错位 - 绝对不要用
::before伪元素模拟遮罩——z-index、pointer-events、层叠上下文全是坑
复杂点在于：rgba 遮罩色要和图片明暗匹配，深图配浅 rgba，浅图配深 rgba，否则文字可读性崩塌；且深色模式下需额外处理，因为 rgba 值不会随主题自动变。
