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。