rgba 颜色混合 css答案

【问题标题】：rgba color mixing cssrgba 颜色混合 css
【发布时间】：2014-12-06 16:14:30
【问题描述】：

尝试创建一个函数，该函数采用两个 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 之间的关系，我可以将其放入代码中。我只是数学不够好，无法弄清楚这一点。所以，我在这里。

提前致谢！

【问题讨论】：

您是如何获得这些值的？如果我这样做 (81,188,187,1) & (102,192,110,.33) 我得到 (87,189,161,1) 而不是 (88,189,162,1)。或者对于第二个，我得到 (128,201,125,1) 而不是 (138,201,125,1)。
嗯，第一个看起来像一个四舍五入的东西。第二个看起来我搞砸了重新输入它。对于那个很抱歉。我通过在 Photoshop 中执行操作（如图所示）然后使用 Photoshop 吸管工具读取值来获得它们。

标签： css opacity rgba mixing

【解决方案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，在您的情况下就是这样）

【讨论】：

如果我有不同的不透明度级别会怎样？