bootstrap 5 的 opacity 工具类仅保留 opacity-0 和 opacity-100，不再支持 opacity-25、opacity-50 等中间值类，需通过扩展 $utilities map 自定义。
Bootstrap 5 的 opacity 工具类命名规则是什么
Bootstrap 5 不再提供像 opacity-25、opacity-50 这类独立的透明度工具类。它把透明度控制统一收归到 opacity CSS 自定义属性（--bs-opacity）和 opacity 原生 CSS 属性上，仅保留一个基础工具类：opacity-0 和 opacity-100。
这意味着你不能直接用 opacity-75 或 opacity-10 —— 它们在 Bootstrap 5 中**不存在**，强行写不会生效。
常见错误现象：页面中写了 opacity-50 却完全没反应，检查元素发现样式没被应用，就是因为类名根本未定义。
使用场景：当你只需要“全透明”或“不透明”两种状态时，opacity-0 和 opacity-100 足够；但多数实际需求（比如半透蒙层、悬停渐变、禁用态弱化）需要中间值，这时就得自己补。
-
opacity-0→ 编译后生成opacity: 0 -
opacity-100→ 编译后生成opacity: 1 - 没有
opacity-25、opacity-75等类，Sass 源码里也未定义对应循环
如何安全扩展 opacity 工具类（推荐方案）
最稳妥的方式是在项目 Sass 中复用 Bootstrap 的工具类生成逻辑，而不是硬写内联 style 或覆盖全局 opacity。
Bootstrap 5 的工具类由 utilities 模块驱动，你可以基于其 $utilities map 扩展：
// _custom-utilities.scss
$utilities: map-merge(
$utilities,
(
"opacity": (
property: opacity,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
90: .9,
100: 1,
)
)
)
);
然后确保在引入 Bootstrap 的 utilities 之前 import 这个文件。编译后就能用 opacity-10、opacity-75 等类了。
为什么这样做比写 style="opacity: .7" 更好？
- 保持响应式前缀支持（虽然 opacity 本身无断点需求，但统一机制利于维护）
- 避免重复 CSS 声明，压缩后更小
- 与 Bootstrap 的 utility 优先级、!important 规则一致
- 便于团队协作和主题切换（比如暗色模式下可统一调整 opacity 基准）
用 inline style 或自定义 class 临时应急是否可行 可以，但要注意副作用。
例如：<div style="opacity: .3"> 能立刻生效，但会绕过所有 CSS 作用域、无法被 PurgeCSS 识别、难以批量修改，且在 React/Vue 等框架中容易和动态 class 冲突。
<p>更可控的替代是声明一个最小化自定义 class：</p>
<pre class="brush:php;toolbar:false;">.opacity-30 {
opacity: .3 !important;
}</pre>
<p>加 <code>!important 是为了对抗 Bootstrap 默认工具类（如 opacity-100）的权重，否则可能被覆盖。
性能影响几乎为零，但兼容性需留意：opacity 在 IE9+ 完全支持，无需前缀；若项目还需兼容 IE8，就只能用 filter: alpha(opacity=30)，但 Bootstrap 5 本身已放弃 IE8 支持，不建议倒退。
opacity 工具类和 rgba() 的关键区别在哪
这是最容易混淆的点：opacity 作用于**整个元素及其子元素**，而 rgba() 只作用于**当前颜色属性**（如 background-color、color）。
例如：
-
<div class="opacity-50"><p>文字</p></div>→ 文字和背景都变半透 -
<div style="background-color: rgba(0,0,0,.5)"><p>文字</p></div>→ 仅背景半透，文字保持 100% 不透明
所以调节蒙层（modal-backdrop）、按钮禁用态、卡片悬浮遮罩时，选 opacity；而做纯色背景渐变、文字描边弱化、图标着色，则优先用 rgba() 或 hsla()。
别试图用 opacity-0 实现“隐藏但保留占位”——它仍会触发 pointer-events，如果要彻底禁用交互，得配合 pointer-events-none；如果要移除占位，应该用 d-none。
