Bootstrap 5 颜色透明度类名 Opacity设置-Bootstrap教程-PHP中文网

Bootstrap 5.3+仅保留opacity-0和opacity-100，移除了opacity-25/50等中间值；文字透明用text-opacity-，背景透明用bg-opacity-配合bg-*类。

bootstrap 5 颜色透明度类名 opacity设置

Bootstrap 5 的 opacity- 类到底还有没有中间值？

没有。Bootstrap 5.3+（含当前最新稳定版）**只保留 opacity-0 和 opacity-100**，opacity-25、opacity-50 等类已被移除。这是官方明确的精简策略，不是你本地配置错了。

如果你在文档或旧项目里看到这些类生效，大概率是：

用了自定义编译的 Bootstrap（扩展了 $utilities map）
引入了第三方插件或旧版 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，这个背景色不会“消失”，只是被透明内容盖住了视觉判断。

VPS Bootstrap

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

下载

真正要实现“透明导航栏”，得走另一条路：

删掉 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;
}

关键点：