css - rgba 颜色混合 css

Question

尝试创建一个接受两个 RGBa 值并产生第三个值的函数。第一个值将是 opacity: 1 例如:color: rbga((0,0,0,1);第二个将是任何不透明度(由用户)。目标是混合两种颜色，就好像你有颜色 A，然后有人拿了一个油漆工具，用半透明的颜色 B 覆盖它。

这是我想要创建的效果。

not code, just some values: 

(0,0,0,1) & (255,255,255,0.5)  = (128,128,128,1)

(255,0,0,1) & (255,255,255,0.5) = (225,128,128,1)

(0,255,255,1) & (255,255,255,0.5) = (128,255,128,1)

(0,0,255,1) & (255,255,255,0.5) = (128,128,255,1)

(81,188,187,1) & (252,0,255,0.5) = (167,94,221,1)

(81,188,187,1) & (102,192,110,0.5) = (92,190,148,1)

(81,188,187,1) & (255,228,0,0.5) = (168,208,93,1)

这是视觉上的: (没想到和上面的数据完全一样的例子)

这里有值:

我最终会使用 javascript 来创建该函数，但我真正需要弄清楚的是颜色 1 和颜色 2 之间的关系，以便我可以放入代码中。我只是数学不够好，无法解决这个问题。所以，我来了。

提前致谢!

Answer 1

这是简单的合成:)

C = Ca*Aa*(1-Ab) + Cb*Ab

其中 Ca 是颜色 A 的分量(依次为红色、绿色或蓝色)，Cb 是颜色 B 的分量，Aa 和 Ab 分别是 A 和 B 的 alpha 值(在这种情况下，Aa 将是1).

所以对于 (81,188,87,1) 和 (239,133,11,0.75)，你得到

81*1*(1-0.75) + 239*0.75 = 199.5
188*1*(1-0.75) + 133*0.75 = 146.75
87*1*(1-0.75) + 11*0.75 = 30

结果为 (199,146,30,1)

(Alpha 是用 A = Aa*(1-Ab) + Ab 计算的，但如果其中一个 alpha 值为 1，则始终为 1，这就是您的情况)