opacity作用于整个元素及子元素并触发层叠上下文，rgba()仅影响指定颜色属性且不干扰子元素；选错会导致文字模糊、z-index失效或动画卡顿。
opacity 作用于整个元素及其所有子元素，rgba() 只影响你写它的那个颜色属性——选错会导致文字发虚、z-index 失效、动画卡顿，不是 bug，是渲染机制决定的。
opacity 会让子元素“被动变透明”，哪怕你写了 opacity: 1
浏览器对整块元素（含所有后代）做一次 alpha 混合，子元素无法“挣脱”。比如：
- 父容器设了
opacity: 0.6，里面按钮的opacity: 1无效，文字依然模糊 - 下拉菜单被半透明卡片遮住？很可能是
opacity触发了新层叠上下文，导致z-index失效 -
opacity: 0不等于隐藏：元素仍占文档流、能响应点击、可被键盘聚焦
rgba() 是颜色函数，不是透明属性，必须绑定在具体颜色声明上
它只改你写的那一处颜色，其余照常。常见误用是直接写 rgba(0,0,0,0.3) 而不加属性名：
- ✅ 正确：
background-color: rgba(0, 0, 0, 0.3)、color: rgba(255, 255, 255, 0.8) - ❌ 错误：
rgba(0, 0, 0, 0.3)单独一行，CSS 会忽略 - border-color 或 box-shadow 中用
rgba()时，旧版 Safari/Android WebView 支持不稳定，建议加 fallback：border-color: #000; border-color: rgba(0,0,0,0.2);
动画和性能表现完全不同
opacity 可硬件加速，rgba() 的 alpha 值不能单独过渡：
- ✅
transition: opacity 0.3s流畅，适合淡入淡出、禁用态反馈 - ❌
transition: background-color 0.3s不会动 alpha，只会插值 RGB，效果诡异 - 想动画背景透明度？只能用
@keyframes切换多个rgba()值，或搭配backdrop-filter - 长列表项 hover 用
opacity易卡顿；纯背景透用rgba()更轻量
别指望它们能互相替代，该用哪个看控制粒度
真正容易被忽略的是“透明目标”是否包含子元素：
- 要毛玻璃导航栏、半透底栏、带透明描边的图标 → 用
rgba() - 要做模态遮罩、加载蒙层、整体淡出 → 用
opacity - 两者混用没问题，但别试图用
opacity解决背景透而文字不清的问题——那是rgba()的职责范围
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
