存在，bootstrap 5.3+ 官方编译版 css 默认包含 opacity-0、opacity-25、opacity-50、opacity-75、opacity-100 类，对应 opacity 值，但不支持响应式前缀。
Bootstrap 5 里 opacity-25 这类类到底存不存在？
存在，但取决于你用的是官方编译版 CSS 还是自定义构建的 Sass。官方 Bootstrap 5.3+ 发布包（CDN 或 npm 安装的 bootstrap.min.css）**默认包含 opacity-0、opacity-25、opacity-50、opacity-75、opacity-100** —— 不是“仅保留 0 和 100”，那是过时或误读的文档信息。
验证方法：打开 官方 CDN CSS，搜索 opacity-25，能直接定位到规则：.opacity-25 { opacity: .25; }。
- 这些类作用于
opacity属性，影响整个元素及其子节点（包括文字、图片、子容器） - 不支持响应式断点前缀（如
opacity-sm-50），需手动扩展 Sass 才能启用 - 若你在项目中没看到效果，大概率是引入了精简版 CSS、用了旧版本（!important 冲突）
text-opacity-25 和 opacity-25 有什么区别？
text-opacity-25 只降低**文字颜色的 alpha 通道**，不影响背景、边框、子元素；而 opacity-25 是对整个元素做 CSS opacity 变换，子元素也会继承变透明——这是根本差异。
典型场景：
- 想让按钮背景半透但文字清晰 → 用
bg-white bg-opacity-25 text-dark（注意：要用bg-opacity-*配合text-dark） - 想让一段提示文字淡一点但不影响旁边图标 → 用
text-opacity-50 - 做全层遮罩（modal-backdrop）→ 必须用
opacity-50，因为要压住整个区域
别混淆：text-opacity-* 类依赖父元素已有颜色（如 text-primary），单独用无效；bg-opacity-* 同理，必须搭配 bg-* 类（如 bg-light）才生效。
为什么加了 opacity-50 没反应？常见失效原因
不是类写错了，而是被其他样式压制或语义冲突。最常踩的坑：
- 元素本身有
style="opacity: 1"内联样式 → 它比 class 权重高，删掉或改用!important（不推荐） - 父容器用了
opacity-0或其他透明度类 → 子元素会叠加透明（0.5 × 0.5 = 0.25），看起来“更透明”或“消失” - 用了
disabled属性（如<button disabled></button>）→ 浏览器自动加 opacity，和你的opacity-50叠加，结果不可控 - 在
position: absolute元素上加了opacity→ 会触发新层叠上下文，可能影响 z-index 行为，尤其和 tooltip/popover 一起用时
需要自定义 opacity-15 或 opacity-87 怎么办？
Bootstrap 不提供任意值工具类，但扩展非常轻量：只需在 Sass 中修改 $utilities map，然后重新编译。
示例（在自定义 Sass 文件中）：
$utilities: map-merge(
$utilities,
(
"opacity": (
property: opacity,
values: (
15: .15,
33: .33,
66: .66,
87: .87
)
)
)
);
编译后就能用 opacity-15、opacity-87 等类。注意：不要直接改 node_modules 里的 Bootstrap 源码，应通过 @import 顺序覆盖变量。
真正容易被忽略的是性能点：频繁使用 opacity（尤其是动画中）会触发浏览器重绘，若页面有大量动态透明元素，建议配合 will-change: opacity 或改用 rgba() 控制背景色透明度来规避。
