Bootstrap 5 默认不提供 opacity-50 等中间值辅助类，仅保留 opacity-0 和 opacity-100，因 $utilities Sass 映射中移除了 25/50/75 档位，属主动设计取舍而非 bug。
bootstrap 5 默认不提供 opacity-50 这类中间值辅助类——它只定义了 opacity-0 和 opacity-100，写了 opacity-50 不会生效，控制台也看不到对应样式规则。
为什么 opacity-50 在 Bootstrap 5 中不生效
Bootstrap 5 的 $utilities Sass 映射默认只启用了全透明和完全不透明两个值。中间档（25/50/75）被移除了，不是 bug，是设计取舍。常见错误是直接从 v4 文档抄代码，或依赖旧教程，结果元素毫无反应。
- 检查浏览器开发者工具的 Elements 面板，搜
opacity，会发现没生成任何对应 CSS 规则 -
opacity-50类名在 Bootstrap 5.0–5.0.2 的源码中根本不存在；5.1+ 仍维持该精简策略 - 即使你手动加了
class="opacity-50"，也不会报错，只是静默失效
替代方案：用 text-white-50 或自定义 opacity 工具类
text-white-50 是个特例——它确实存在，且作用于文本颜色的 alpha 通道，等价于 color: rgba(255, 255, 255, 0.5)。但它只对 .text-white 系列有效，不能套用到按钮、卡片或任意容器上。
-
text-primary-50、text-dark-50等在标准 Bootstrap 5 中**不存在**，强行使用无效 - 若需对非白色文本做半透，得用内联样式：
style="color: rgba(13, 110, 253, 0.5)" - 想全局支持
opacity-50？必须修改 Sass 变量，在_utilities.scss中扩展$utilities，加入opacity: 0.5对应项
更稳妥的做法：绕过 opacity，用 rgba() 控制背景或文字
多数场景下，你真正要的不是“整个元素变半透”，而是“背景半透但文字清晰”或“文字半透但不影响交互”。这时直接用 rgba() 更可控、语义更准，也避免 opacity 连带子元素一起模糊的问题。
- 背景半透：用
background-color: rgba(255, 255, 255, 0.7)替代bg-light opacity-75 - 文本半透：用
color: rgba(33, 37, 41, 0.6)替代text-body opacity-60 - Bootstrap 5.1+ 提供了
bg-opacity-75，但必须与bg-*类成对出现，如bg-light bg-opacity-75；单独写无效
容易被忽略的关键点
很多人卡在“为什么我加了类却没效果”，其实问题不在写法，而在版本和上下文。Bootstrap 5 的透明度工具类极度克制，opacity-* 不是“删减版”，而是“仅保留开关级控制”的设计。需要中间值？要么自己补 Sass，要么换思路用 rgba() 或 CSS 自定义属性（如 --bs-opacity: 0.5）。别指望靠 class 名猜出可用值——查你本地 node_modules/bootstrap/scss/_variables.scss 里的 $utilities 才是最准依据。
