opacity会使整个元素及子元素统一透明，无法单独控制子元素不透明；rgba()仅让指定颜色透明，不影响子元素；transparent语义更明确，推荐用于完全透明背景。
opacity 属性会让整个元素及其子元素一起变透明
这是最常被误用的点：给一个 div 设置 opacity: 0.5，里面所有的文字、按钮、图片都会跟着半透，没法单独控制内容不透明。哪怕你给子元素写 opacity: 1 也没用——因为 opacity 是继承 + 叠加的，父级已经压了一层半透，子级再设 1 也回不到完全不透明。
- 适用场景：需要整块区域（含内部所有内容）统一淡入/淡出动画，比如模态框遮罩层
- 不适用场景：只想让背景色变透明，而文字保持清晰——这时必须换思路
- 性能影响小，但会触发浏览器的合成层（compositing），频繁动画时要注意重绘开销
rgba() 是给颜色本身加透明度，不影响子元素
rgba() 只作用于你指定的那个颜色值，比如背景色或边框色。它不会动 DOM 结构里的任何其他东西，文字照常显示，子元素完全不受干扰。
- 常见错误：写成
background-color: rgba(0, 0, 0, 0.5)却忘了把原来的background-color或background-image清掉，结果颜色叠在图片上，效果发灰 - 兼容性没问题：IE9+ 和所有现代浏览器都支持
rgba() - 注意 alpha 值是 0–1 的小数，不是 0–100 的百分比；写成
rgba(0,0,0,50)会直接失效，变成默认黑
background-color: transparent 和 rgba(0,0,0,0) 不是一回事
transparent 是一个关键字，语义明确，表示“完全透明且无颜色信息”；而 rgba(0,0,0,0) 是“纯黑但 alpha 为 0”，视觉上一样，但某些老版本 Safari 或旧版 Android WebView 会把它解析成黑色再透明，导致抗锯齿异常或阴影错位。
- 推荐优先用
transparent表示真·透明背景，更稳妥 - 如果要用
rgba()做渐变过渡（比如 hover 时从rgba(255,0,0,0.2)到rgba(255,0,0,0.8)），那就必须用rgba()，不能换transparent - 不要混用：比如
background: linear-gradient(...), rgba(0,0,0,0.3)—— 后者会被当成第二层背景，可能意外盖住渐变
opacity 动画和 rgba 动画的渲染表现不同
用 opacity 做淡入淡出，浏览器能走 GPU 加速，帧率稳；但用 rgba() 改变背景色透明度，属于 color 属性变化，在部分浏览器（尤其是 Chrome 低版本）中会触发 layout 或 paint，动画卡顿更明显。
立即学习“前端免费学习笔记（深入）”；
- 想做高性能透明动画：优先用
opacity，哪怕要多包一层div来隔离内容 - 如果必须用
rgba()动画（比如渐变背景+透明度联动），加上will-change: background-color提前提示浏览器优化 - CSS 自定义属性（
--bg-alpha）配合rgba()在 JS 控制时更灵活，但别在高频 scroll 事件里反复 setProperty，容易掉帧
opacity，却没意识到子元素里的图标、输入框 placeholder 文字全跟着变浅了，用户反馈“看不清”，排查半天才发现是透明度穿透。这种问题不看真实 DOM 树结构，光扫 CSS 很难一眼发现。 
