rgba()比 opacity 更高效，因其仅混合颜色 Alpha 通道而不触发合成层；opacity 会使整个元素及子树降级为独立合成层，增加 GPU 压力。
CSS 透明效果本身对性能影响很小，但不当使用（比如在大量元素或频繁 重绘 区域滥用 opacity）可能触发额外的合成层、降低渲染效率。相比 opacity，用 rgba() 设置颜色透明度更轻量——它只作用于单个属性，不强制整个元素及其子树变为透明图层。
rgba 为什么 比 opacity 更高效
rgba() 是颜色值的一部分，浏览器 只需在绘制该颜色时混合 Alpha 通道，不改变元素的层叠上下文或渲染流程；而 opacity 会让元素及其所有子节点进入独立的合成层（尤其在有动画或 transform 的场景下），增加 内存占用 和 GPU 合成压力。
- 设置文字半透明：用
color: rgba(0, 0, 0, 0.6)，别用color: #000; opacity: 0.6 - 背景透明：优先写
background-color: rgba(255, 255, 255, 0.1)，而非background-color: white; opacity: 0.1 - 避免在列表项、卡片容器等父级上滥用
opacity，否则整组内容都会被降级为合成层
哪些情况 opacity 不可替代
当需要让整个元素（含边框、阴影、子元素）统一变淡时，opacity 仍是语义最直接的选择。例如模态框遮罩层、禁用态按钮整体弱化。这时应控制使用范围，避免嵌套深层结构，并配合 will-change: opacity（仅在必要动画前临时启用）来提示浏览器优化。
- 遮罩层用
opacity合理，但建议固定尺寸、避免缩放或滚动中反复触发 - 过渡动画中若只需渐隐 / 渐显，可搭配
transform避免触发布局重排 - 慎用
opacity: 0隐藏元素——它仍占文档流且可交互，推荐结合visibility: hidden或display: none
层级透明带来的隐性开销
多个带 opacity 的重叠元素（如带透明背景的导航栏 + 半透弹窗 + 模糊 backdrop）会迫使浏览器创建多个合成层并频繁混合像素，尤其在移动设备上易引发掉帧。此时应尽量扁平化结构，用 rgba() 替代部分透明需求，或改用 backdrop-filter + 单层遮罩模拟毛玻璃效果。
立即学习 “ 前端免费学习笔记（深入）”；
- 导航栏背景用
rgba(255, 255, 255, 0.85)，而不是白色背景加opacity: 0.85 - 弹窗阴影用
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)，而非给整个弹窗设opacity - 避免父容器设
opacity后，子元素又单独设opacity—— 透明度会叠加，也加重合成负担
不复杂但容易忽略：透明不是“免费”的视觉效果，关键在按需选择机制——颜色级透明用 rgba，整体状态级透明才用 opacity。
