Question

我正在创作一个带水和土地的GIF动画。陆地部分有海岸，所以在某些情况下水会覆盖这些海岸。但是，我希望海水在水下稍微可见。基本上，想象一个透明的png代表水，而另一个代表有沙子。合并的2幅图像可以视为第三张图像。

我的问题是 - 如何根据顶部的RGBA（透明度）和底部的RGB值计算新像素的RGB值，以模仿自然的外观。

我会自己改变透明度，看看哪种方式最适合我，但我错过了一个公式。

编辑： atm我有一个想法 - 取水的透明度水平的百分比，并根据该百分比计算新的RGB。对沙子像素执行相同操作，但使用“剩余”百分比（100-透明度％）

ie（为简单起见，部分为％）（R1，G1，B1,40）（R2，G2，B2）=第一组的40％+第二组的60％

Answer 1

Alpha混合要么死了简单（alpha是0-255，所以颜色是目标*（255 - a）+覆盖* a，全部超过255）或非常微妙，当你允许目标也有alpha 。此外，有必要为许多应用程序有效地实现，这是通过预乘，然后使用

对除法进行硬编码来完成的。

 ((x+1) * 257) >> 16;

Answer 2

Malcolm McLean为目的地（又名背景）完全不透明的情况给出了正确的答案，恰好是我们正在讨论的情况。

为了完整起见，我希望你能给出一般情况的公式和背后的直觉。

首先，假设我们的颜色是4分量浮点向量，每个通道的值介于0和1之间。还假设我们的颜色是alpha预乘的，即r，g和b通道是预先的乘以alpha通道。然后alpha混合公式为：

blended = front + back * (1.0 - front.a)

直觉是：我们采用正面颜色并添加一些背面颜色，即我们可以通过正面颜色看到的颜色。

请注意，混合颜色也是alpha预乘。