opacity工具类必须作用于opacity属性而非rgba()，它影响整个元素及其子节点；需分层控制时应使用伪元素或绝对定位隔离，避免语义结构被整体变淡。
opacity 工具类必须用 opacity 而不是 rgba()
很多开发者误以为给 background-color 或 color 加 rgba() 就是“用了透明度工具类”，但 CSS 工具类体系（如 Tailwind、UnoCSS、Windi）中真正的 opacity 工具控制的是整个元素的渲染透明度，作用于 opacity 属性本身。它会影响元素及其所有子节点，这是和 rgba() 的根本区别。
常见错误现象：
– 给按钮加 text-gray-500/30（即 color: rgba(107,114,128,0.3)）后，图标文字变淡，但 hover 时背景没同步变淡 → 视觉不一致
– 用 bg-black/20 设置遮罩层，但内部弹窗内容也跟着变灰 → 实际应只让遮罩层透明，内容保持 100% 不透明
-
opacity-0对应opacity: 0（完全隐藏，但仍占布局流） -
opacity-50对应opacity: 0.5 -
opacity-100对应opacity: 1（显式重置，避免继承干扰）
opacity 工具类会穿透子元素，需要隔离时得用 wrapper
当只想让某个视觉层（比如蒙版、边框、阴影）半透明，而内部内容保持清晰，直接在父容器上设 opacity 会把文字、图标、表单控件全变淡——这不是分层，是“糊成一片”。
正确做法是拆出独立 DOM 节点，仅对目标层应用 opacity 工具类：
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #00000080, transparent);
z-index: 1;
}
.card-content {
position: relative;
z-index: 2;
}
或者用工具类组合（以 Tailwind 为例）：
正文内容
- 不要写
—— 标题和段落都会变淡 - 若必须复用 opacity 工具类控制局部，优先用伪元素或绝对定位层，而非包裹整个语义结构
- 动画中慎用
opacity过渡：它会触发重绘（repaint），不如transform: translateZ(0)+will-change: opacity配合使用
opacity-0 不等于 display: none，也不等同于 visibility: hidden
这是最容易被忽略的兼容性与可访问性细节。opacity-0 元素依然参与文档流、接收事件、被屏幕阅读器读取（除非额外加 aria-hidden="true"）。
- 想彻底移除交互和语义？用
hidden属性或display: none工具类（如hidden或invisible） - 想保留占位但禁用交互？加
pointer-events-none+opacity-0 - 过渡动画中从
opacity-0到opacity-100，记得同时控制transition-opacity，否则默认可能只有transition: all导致意外延迟
例如，一个淡入提示框应这样写：
操作成功
然后 JS 控制添加 show 类 —— 否则只靠 opacity-0 切换，没有过渡效果。
opacity 在 Safari 和旧版 Edge 中有渲染差异
某些 Safari 版本（尤其是 iOS 15.4 之前）对 opacity 值小于 0.01 的元素会跳过合成层，导致闪烁或消失；Edge 18 及更早版本在 flex 容器内对 opacity 子项存在布局塌陷问题。
- 避免使用
opacity-0做“条件渲染”逻辑，它不是状态开关 - 如果需极低透明度（如
opacity: 0.001），改用opacity-1（即0.01）并配合visibility: hidden控制显示态 - 在
transform+opacity组合动画中，Safari 建议加backface-visibility: hidden防止毛边
真正难的不是写 opacity-75，而是判断这个透明度该不该作用在整个元素树上，以及它是否正在悄悄破坏焦点顺序、屏幕阅读体验或动画帧率。
