三层及以上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)叠在白色背景上：
- 第一层：0.2 × 0 + 255 × (1 − 0.2) = 204 → 灰（204,204,204）
- 第二层：0.2 × 0 + 204 × (1 − 0.2) = 163.2
- 第三层：0.2 × 0 + 163.2 × (1 − 0.2) ≈ 130.6
最终灰度≈131，不是0.6，也不是简单相加。
为什么DevTools拾色器显示的颜色和代码里写的不一样？
因为拾色器返回的是**最终合成色**，已包含父级背景、层叠上下文截断、默认画布白底等影响。常见偏差来源：
- 父容器没设
background-color，子元素rgba()自动与白色画布混合 - 父级用了
filter: opacity(0.8)或transform，触发新层叠上下文，叠加链被截断 -
getComputedStyle(el).backgroundColor永远只返回元素自身声明值（如rgba(0,0,0,0.3)），不反映真实输出
调试时务必用拾色器点选像素，再反推——别抄代码值，也别信肉眼。
想精准复现设计稿颜色，该用rgba()还是opacity？
优先用rgba()控制单个颜色属性；opacity会整层衰减，且嵌套时alpha相乘（两层opacity: 0.5→实际0.25），还会削弱点击热区。实操建议：
- 遮罩、卡片浮层等只需背景透的场景，用
background-color: rgba() - 需多层可控混合时，改用
background-blend-mode+ 多背景图层，而非堆div - 深色模式适配慎用固定
rgba()，建议结合CSS变量动态切换基准色
真正难的不是公式本身，而是确认“背景到底是什么”——透明？白色？黑色？父级有没有filter？这些都得先查清，否则算出来也是错的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
