Bootstrap 5 不提供 text-opacity-* 类,因其无法兼容主题切换且违背可访问性原则;应使用 rgba() 或 hsla() 直接设置 color 的 alpha 值来实现文字半透明。

text-opacity-75 在 Bootstrap 5 中根本不存在
Bootstrap 5 官方 CSS(包括 CDN 提供的 bootstrap.min.css)**不提供任何 text-opacity-* 类**。你写 text-opacity-75 不会生效,浏览器会直接忽略——这不是拼写错误,而是这个类压根没被定义。
很多人搜到这个词,是误把 bg-opacity-75 或 opacity-75 的命名规则套用到了文字上。但文字透明度不能靠独立工具类控制,原因很实在:CSS 没有原生的 “text opacity” 属性,只有 opacity(作用于整个元素)或 color 的 alpha 通道(比如 rgba())。
想让文字半透明,只能改 color 的 alpha 值
真正有效、语义正确、且不影响子元素的方式,是用带透明度的 color 值,例如:
<span class="text-primary" style="color: rgba(13, 110, 253, 0.75);">半透文字</span>
这里 rgba(13, 110, 253, 0.75) 对应的是 text-primary 的默认色(#0d6efd),alpha 值 0.75 即 75% 不透明度。
- 别用
opacity-75包文字容器——它会让整个元素(含 padding、子节点、伪元素)都变透明,破坏可读性和布局 - 别试图覆盖
text-*类的color时只写 hex 或 named color,那没法控透明度 - 如果用 Sass,可复用 Bootstrap 的颜色变量:
rgba($primary, 0.75)
为什么没有 text-opacity-*?设计上就是故意的
Bootstrap 团队在 v5 中明确放弃为文字单独封装透明度工具类,因为:
-
color的透明度必须和具体色值绑定,无法像背景那样抽象成“浅灰+75%透”这种通用组合 - 同一段文字在不同主题(light/dark mode)下,
text-body的 RGB 值不同,硬写text-opacity-75会导致深色模式下文字过淡甚至看不见 - 已有
text-muted这个语义化替代:它不是透明度控制,而是用更灰、更低对比度的颜色模拟弱化效果,兼容性更好、可访问性更强
容易踩的坑:text-reset + opacity 混用
有人想先用 text-reset 把文字颜色设为 inherit,再在外层加 opacity-75 实现“文字变透”。这看似聪明,但实际会出问题:
-
text-reset只重置color、text-decoration和font-weight,它不保证继承来的color带 alpha;如果父级color是 hex,子级继承后仍是不透明的 - 外层
opacity-75依然会把文字周边所有内容(比如图标、内联span)一起变淡,失去控制精度 - 读屏器可能因低对比度报错(WCAG 要求文字与背景对比度 ≥ 4.5:1),而
opacity降低的是整体对比度,比改color更难达标
真要动态控制文字透明度,老实用 rgba() 或 hsla() 写死 alpha,或者用 CSS 自定义属性配合 JS 切换——别绕远路。


















