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的α值（在这种情况下，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，这就是你的情况）