如何计算CSS多层RGBA颜色叠加后的实际颜色？

三层及以上rgba()叠加不能一步到位，必须逐层计算：第二层混合对象是第一层与背景合成的结果，第三层再混合该中间结果；例如三层rgba(0,0,0,0.2)叠在白色背景上，最终灰度≈131，非0.6或简单相加。

两层rgba()叠加结果怎么算？

浏览器不加法、不平均，只执行标准 Over 混合公式：result = foreground × alpha + background × (1 − alpha)，每个通道（R/G/B）独立运算。比如上层rgba(255, 0, 0, 0.3)盖在下层rgba(0, 0, 255, 0.8)上，红色通道结果是 255 × 0.3 + 0 × (1 − 0.3) = 76.5，蓝色通道是 0 × 0.3 + 255 × (1 − 0.3) = 178.5，最终不是紫，而是偏红的灰蓝。

三层及以上rgba()叠加能直接套公式吗？

不能一步到位，必须逐层计算：第二层混合对象是第一层与背景合成的结果，第三层再混合这个中间结果。例如三层rgba(0,0,0,0.2)叠在白色背景上：

1. 第一层：0.2 × 0 + 255 × (1 − 0.2) = 204 → 灰（204,204,204）
2. 第二层：0.2 × 0 + 204 × (1 − 0.2) = 163.2
3. 第三层：0.2 × 0 + 163.2 × (1 − 0.2) ≈ 130.6

最终灰度≈131，不是0.6，也不是简单相加。

为什么DevTools拾色器显示的颜色和代码里写的不一样？

因为拾色器返回的是最终合成色，已包含父级背景、层叠上下文截断、默认画布白底等影响。常见偏差来源：

1. 父容器没设background-color，子元素rgba()自动与白色画布混合
2. 父级用了filter: opacity(0.8)或transform，触发新层叠上下文，叠加链被截断
3. getComputedStyle(el).backgroundColor永远只返回元素自身声明值（如rgba(0,0,0,0.3)），不反映真实输出

调试时务必用拾色器点选像素，再反推——别抄代码值，也别信肉眼。

想精准复现设计稿颜色，该用rgba()还是opacity？

优先用rgba()控制单个颜色属性；opacity会整层衰减，且嵌套时alpha相乘（两层opacity: 0.5→实际0.25），还会削弱点击热区。实操建议：

1. 遮罩、卡片浮层等只需背景透的场景，用background-color: rgba()
2. 需多层可控混合时，改用background-blend-mode + 多背景图层，而非堆div
3. 深色模式适配慎用固定rgba()，建议结合CSS变量动态切换基准色

真正难的不是公式本身，而是确认“背景到底是什么”——透明？白色？黑色？父级有没有filter？这些都得先查清，否则算出来也是错的。