RGBA叠加遵循Alpha混合公式result = foreground × alpha + background × (1 − alpha)，非简单相加或平均；子元素背景变暗常因父容器透明背景透出所致，正确做法是子元素用不透明色加isolation: isolate。
RGBA叠加不是“叠颜色”，而是按公式混合
浏览器渲染时根本不会把两个rgba()值简单相加或平均，它执行的是标准Alpha混合公式：result = foreground × alpha + background × (1 − alpha)。比如rgba(0, 0, 0, 0.5)盖在白色背景上，结果不是“半黑”，而是50%黑+50%白=中灰；再叠一层同样的rgba(0, 0, 0, 0.5)，第二层的计算对象已是这个中灰，不是原始白底——所以最终是0.75灰，不是1.0黑。
子元素背景变暗，大概率是父容器透过来的
常见误判：以为子元素自己设了background-color: rgba(55, 55, 77, 1)就万事大吉，但若父容器是rgba(0, 0, 0, 0.87)，而子元素又没填满父容器（比如有padding或border），那父背景就会从留白处透出，和子元素背景形成视觉混合。
- ✅ 正确做法：子元素用不透明色（
alpha = 1）+isolation: isolate，强制创建独立层叠上下文 - ❌ 避免：子元素也用
rgba()，哪怕alpha是0.99，也会和父层二次混合 - ⚠️ 注意：
opacity: 1要显式写，防止被继承值覆盖
调试时别信代码里的rgba()值，信DevTools拾色器点出来的色
getComputedStyle(el).backgroundColor只返回你写的值，不是最终合成色；Chrome DevTools颜色拾取器显示的是已混合结果——但这个结果依赖当前父背景色。如果父级没设背景，默认和画布白混合，你在深色模式下看到的色值就完全不对。
- 调试前先确认父容器
background-color是否明确（别留transparent） - 深色模式下，
rgba(255, 255, 255, 0.1)可能几乎不可见，得改成rgba(255, 255, 255, 0.3)或用@media (prefers-color-scheme: dark)重写 - 想复现设计稿，必须手动套公式算，不能靠“看起来差不多”
想控制叠加效果，优先换思路，别硬叠rgba()
堆两层rgba(0, 0, 0, 0.3)不如单层rgba(0, 0, 0, 0.6)可控；想模拟磨砂玻璃感，backdrop-filter: blur(4px)比多层rgba()更干净；需要阴影层次感，用box-shadow多层（每层rgba()透明度递减、模糊半径匹配偏移）比靠背景叠加靠谱。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对一行rgba()，而是判断哪一层该透、哪一层该堵、哪一层该隔离——混用opacity、rgba()、background-blend-mode时，它们工作层级不同，一动全乱。
