opacity作用于整个元素及其子元素，rgba仅影响指定颜色属性；opacity可直接动画，rgba的alpha不可单独过渡。
opacity 是整体“蒙层”，rgba 是局部“调色”
直接说结论：opacity 会让整个元素（包括文字、图片、子元素、边框、阴影）一起变透明；而 rgba() 只影响你明确写它的那个颜色属性，比如 background-color: rgba(0, 0, 0, 0.3)，只让背景透，里面文字照常清晰。
- 常见错误现象：给按钮加了
opacity: 0.6，结果文字也发虚看不清——这不是 bug，是它本来的设计行为 - 使用场景：
opacity适合做淡入淡出动画、遮罩层、禁用态视觉反馈；rgba()更适合 UI 细节控制，比如半透底栏、毛玻璃效果、带透明度的描边或文字阴影 - 继承性差异：
opacity会被子元素“被动继承”（即使子元素没设，也会变透明）；rgba()完全不继承，它只是个颜色值，子元素该啥样还是啥样
alpha 参数看着一样，作用对象完全不同
opacity 和 rgba() 的 alpha 值都取 0~1，但它们不是同一类参数：前者是 CSS 属性，后者是颜色函数的一部分。
-
opacity: 0.4是独立声明，可单独开关，也能参与 transition 动画（如transition: opacity 0.3s） -
rgba(255, 255, 255, 0.4)必须绑定在某个颜色属性上，比如background-color或color；不能直接动画 alpha 值（浏览器不支持transition: background-color中的 alpha 单独变化） - 想动画背景透明度？得靠
@keyframes配合多个rgba()值，或改用backdrop-filter: blur()+background-color: rgba()组合
兼容性和性能要注意这些点
两者都支持 IE9+，看似没差别，但实际项目中容易踩坑。
- 旧版 Safari（rgba() 在
border-color或box-shadow中的 alpha 支持不稳定，建议加一层 fallback，比如先写border-color: #000，再覆盖border-color: rgba(0,0,0,0.2) -
opacity: 0不等于display: none：元素仍占文档流、可被聚焦、能响应事件；如果真要“彻底移除”，别只靠 opacity - 性能上，
opacity触发的是重绘（repaint），而频繁改变display或尺寸会触发更耗性能的回流（reflow）；但opacity若用于大量元素（如列表项 hover 效果），仍可能造成渲染卡顿，此时rgba()更轻量
.card {
background-color: rgba(255, 255, 255, 0.85); /* 背景微透，文字锐利 */
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1); /* 边框也带透明，更柔和 */
}
<p>.card--faded {
opacity: 0.7; /<em> 整体压暗，含文字/图标/阴影 </em>/
}</p>真正难的不是选哪个，而是意识到：当你想“让背景透一点但文字不能糊”，rgba() 是唯一正解；而当你需要“整个模块渐隐”，opacity 才是简洁可靠的路径。混用或误判，往往就卡在这一念之间。
立即学习“前端免费学习笔记（深入）”；
