应优先使用rgba控制背景透明，避免opacity导致子元素同步变透明；需整体渐隐时才用opacity；动画务必用opacity以保障性能。
opacity 设置会让整个元素（含子元素）一起变透明
直接给父元素加 opacity: 0.5，它的所有子元素也会被“继承”透明度——这不是继承，而是渲染层的叠加效果。比如一个弹窗容器设了 opacity: 0.3，里面的文字、按钮全会发虚，即使你单独给文字设 opacity: 1 也无效。
常见误用场景：
- 想让遮罩层半透但保持按钮清晰 → 错误地给整个弹窗 wrapper 设 opacity
- 卡片有浅色背景+深色文字，只希望背景淡一点 → 用了 opacity 导致文字也变灰
rgba 背景色才是控制“仅背景透明”的正解
rgba() 中的 a（alpha）只作用于颜色本身，不影响子元素。所以给 background-color 设 rgba(0, 0, 0, 0.2)，文字、图标、边框全保持原样清晰。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
rgba()只能用于颜色类属性（background-color、color、border-color等），不能用于opacity那种全局透明控制 - 如果背景是图片或渐变，
rgba不适用，得用伪元素 +opacity或background-blend-mode - 旧版 IE（≤8）不支持
rgba，需提供fallback：先写background-color: #000，再覆盖background-color: rgba(0,0,0,0.2)
opacity 和 rgba 混用时的层级陷阱
当同时使用两者，渲染顺序会影响最终观感。比如：
div {
background-color: rgba(255, 255, 255, 0.9);
opacity: 0.8;
}
结果不是“背景 0.9 + 整体 0.8 = 0.72”，而是先按 rgba 渲染背景，再对整个元素做一次 opacity 叠加——文字、边框、阴影全被压暗一层。这种叠加容易让设计稿失准。
实操建议：
- 要纯背景透 → 只用
rgba，禁用opacity - 要做整体渐隐动效（如 fade-out）→ 只用
opacity，确保子元素同步变化 - 需要精确控制（比如背景透 + 文字加阴影）→ 用伪元素画背景层，主元素保持
opacity: 1
透明度动画必须用 opacity，别碰 rgba 的 a 值
CSS 动画/过渡中，opacity 是可硬件加速、性能好、浏览器支持稳的属性；而 rgba() 的 a 值在部分浏览器（尤其是 Safari 旧版本）中无法触发 GPU 加速，动画会掉帧、卡顿。
正确写法：
.fade { transition: opacity 0.3s ease; }
.fade:hover { opacity: 0.4; }
错误写法（慎用）：
.bad { transition: background-color 0.3s ease; }
.bad:hover { background-color: rgba(0,0,0,0.4); }
除非你明确测试过所有目标设备，否则不要靠改变 rgba 的 alpha 做过渡。
opacity，后续排查文字发虚问题反而更费时间。 
