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 的写法，比如：

...，结果完全没反应。用浏览器开发者工具检查元素样式，会发现该类根本没有被解析。

如果你只需要“隐藏”或“完全显示”，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：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• .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，则这条路走不通，只能靠媒体查询手写。