应根据透明需求选择：需整体淡入/淡出用opacity；仅背景或文字等单色透明用rgba()。opacity影响整个元素及子元素且不可逆，rgba()仅作用于指定颜色属性，互不影响。
opacity 会让整个元素及其子元素一起变透明
直接设置 opacity: 0.5 确实简单，但副作用明显：它作用于整个渲染树，子元素无法通过设置 opacity: 1 恢复不透明。比如一个半透明卡片里有文字，文字也会跟着变淡，想单独加粗或提亮就做不到。
常见错误是给父容器设 opacity 后，发现按钮、图标、文字全都模糊了，还以为是字体渲染问题——其实只是被连带透明化了。
- 适用场景：整块区域需要统一淡入/淡出动画（如模态框遮罩）
- 注意：会触发新层叠上下文，可能影响
z-index行为 - 性能较好，浏览器对
opacity的硬件加速支持普遍
rgba() 只影响当前元素的背景色或文字色
rgba() 是颜色值的一部分，不是独立属性。它只改变你明确赋值的那个颜色通道，比如 background-color: rgba(0, 0, 0, 0.3) 只让背景半透，文字、边框、子元素完全不受影响。
容易踩的坑是误以为 rgba() 能控制整个元素透明度，结果写了 color: rgba(0,0,0,0.5) 却发现只有文字变淡，背景还是实色——这恰恰是对的，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 必须配合具体颜色属性使用：
background-color、color、border-color等 - 不能用于非颜色属性（比如不能写
opacity: rgba(0,0,0,0.5)） - IE8 及更早版本不支持
rgba()，需提供 fallback（如十六进制色值）
什么时候该用 opacity，什么时候该用 rgba()
关键看你要“透明”的是「颜色本身」，还是「整个元素的视觉权重」。
- 要让背景模糊但文字清晰 → 用
background-color: rgba() - 要做渐隐动画（如 hover 淡出）→ 优先用
opacity，配合transition - 子元素需要保持高对比度（如卡片上的操作按钮）→ 避免
opacity，改用rgba()控制背景 - 需要兼容老浏览器且只需背景半透 → 可考虑半透 PNG 图片作为 fallback
opacity 和 rgba() 混用时的叠加逻辑
如果同时用了 opacity: 0.8 和 background-color: rgba(255, 0, 0, 0.5)，最终背景透明度不是 0.5 × 0.8 = 0.4，而是先按 rgba() 渲染背景，再把整个元素（含该背景）整体乘以 0.8 —— 子元素也参与这次缩放。
这种叠加容易导致预期外的过暗效果，尤其在深色主题中。调试时建议先禁用 opacity，单独调好 rgba() 值，再决定是否加全局透明。
真正难处理的是多层嵌套 + 混合使用两种方式，这时候视觉反馈和代码意图容易脱节，最好统一策略。
