opacity作用于整个元素及其子元素并触发新层叠上下文，rgba()仅影响指定颜色属性且alpha值须为0–1小数；前者支持opacity过渡，后者需用@keyframes动画；完全透明优先用transparent。
opacity会让整个元素连带子元素一起变淡
这是最常被误用的点：写opacity: 0.6，按钮里的文字、图标、边框、阴影全跟着发虚，哪怕你给span加了opacity: 1也拉不回来——因为浏览器不是“调亮度”，而是在渲染层对整块区域做合成操作，子元素只能在已变淡的图层上再画一遍。
常见错误现象：
- 下拉菜单被半透明父容器遮住，z-index失效（
opacity触发新层叠上下文） - 禁用态按钮文字看不清，以为是字体问题，其实是
opacity把文字也压暗了 -
opacity: 0后元素仍能点击、聚焦、参与 tab 键导航，不是真隐藏
rgba()只动你写的那个颜色值
rgba()不是属性，是颜色函数。它只影响你把它塞进去的那个 CSS 属性，比如background-color: rgba(0, 0, 0, 0.3)就只改背景色，文字、边框、子元素完全不受干扰。
关键细节：
- alpha 参数必须是
0–1小数：rgba(0,0,0,0.3)✅，rgba(0,0,0,30%)❌（被忽略，降级为transparent） - IE9+ 支持，IE8 及更早需 fallback 到 1px 半透 PNG
- 和
background-image或linear-gradient()混用时容易叠加出灰蒙蒙效果，记得清掉原有背景
动画和性能表现完全不同
opacity可直接过渡：transition: opacity 0.3s，硬件加速友好，适合模态框淡入、遮罩层渐显。
rgba()的 alpha 值不能单独被transition控制——你没法写transition: background-color.alpha 0.3s，浏览器根本不认。
想动画背景透明度？只能：
- 用
@keyframes手动定义多个rgba()值 - 配合
backdrop-filter: blur()+background-color: rgba() - 高频场景（如长列表 hover）优先用
rgba()，避免大量opacity重绘卡顿
transparent比rgba(0,0,0,0)更稳妥
transparent是关键字，语义明确，表示“真·完全透明且无颜色信息”；rgba(0,0,0,0)本质是“纯黑但 alpha 为 0”，某些旧版 Safari 或 Android WebView 会先渲染黑色再透明，导致抗锯齿异常或阴影错位。
所以：
- 要完全透明背景，优先用
background-color: transparent - 要用渐变过渡（如 hover 从
rgba(255,0,0,0.2)到rgba(255,0,0,0.8)），才必须用rgba() - 别混写：
background: linear-gradient(), rgba(0,0,0,0.3)会被当成两层背景，第二层可能盖住渐变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
