Bootstrap 5 的 opacity-* 类仅保留 opacity-0 和 opacity-100，opacity-25、opacity-50 等中间值类已移除，属官方精简设计；需中间值须手动扩展 $utilities 或使用内联 rgba()。
Bootstrap 5 的 opacity-* 类只剩两个：opacity-0 和 opacity-100
bootstrap 5 默认只提供 opacity-0 和 opacity-100 这两个工具类，opacity-25、opacity-50 等中间值类**根本不存在**，写了也不会生效。这是官方有意精简后的设计——透明度控制被收归到 css 自定义属性 --bs-opacity 和原生 opacity 属性上，不再预设多档工具类。
常见错误是复制旧项目或 Bootstrap 4 的写法，比如：<div class="opacity-50">...，结果完全没反应。用浏览器开发者工具检查元素样式，会发现该类根本没有被解析。<p>如果你只需要“隐藏”或“完全显示”，<code>opacity-0 和 opacity-100 够用；但实际开发中多数场景（如蒙层、悬停弱化、禁用态视觉提示）需要中间值，这时必须自己扩展。
想用 opacity-50？得手动扩展 $utilities map
要让 opacity-50 这类类名生效，必须在 Sass 编译环节修改 $utilities 映射。CDN 或预编译的 bootstrap.min.css 不含这些扩展。
在自定义 SCSS 文件（如 _custom.scss）中加入：
.opacity-10 { opacity: .1 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-90 { opacity: .9 !important; }或者更规范地复用 Bootstrap 的 utilities 机制：
$utilities: map-merge(
$utilities,
(
"opacity": map-merge(
map-get($utilities, "opacity"),
(
values: (
10: .1,
25: .25,
50: .5,
75: .75,
90: .9
)
)
)
)
);注意：!important 是必要的，否则容易被组件内联样式或更高权重规则覆盖。
别用 opacity-* 实现“背景透明”——语义和效果都错
opacity-50 让整个元素（文字、图标、边框、子节点）一起变半透明，这不是“背景透明”，而是整块降级。可访问性风险高（文字对比度骤降），且无法单独控制背景层。
真正需要背景半透明时，必须用 rgba() 或 hsla() 直接设置 background-color：
.navbar { background-color: rgba(255, 255, 255, 0.8) !important; }.badge { background: rgba(var(--bs-primary-rgb), 0.3) !important; }.modal-backdrop { background-color: rgba(0, 0, 0, 0.4) !important; }
特别注意：background 是简写属性，优先级高于 background-color；Bootstrap 5.3+ 的 .badge 使用 background: var(--bs-badge-bg)，所以必须用 background 覆盖，不能只改 background-color。
响应式 opacity 类（如 opacity-md-50）默认不启用
opacity-sm-50、opacity-md-75 这类类名在官方 CDN 版本里**不会生效**。Bootstrap 5 默认关闭响应式工具类生成，即使你写了，CSS 文件里也没有对应规则。
要启用它，必须在 Sass 中显式配置：
$enable-responsive-utilities: true;
$utilities: map-merge(
$utilities,
("opacity": map-merge(map-get($utilities, "opacity"), ("responsive": true)))
);但真有必要吗？透明度随断点变化的场景极少。强行加不仅增加打包体积，还容易引发维护混乱——比如移动端设 opacity-sm-25，桌面端却忘了重置，导致内容不可读。
复杂点在于：你得确认项目是否走 Sass 编译流程；如果用的是 CDN 或构建工具自动注入的 CSS，则这条路走不通，只能靠媒体查询手写。
