在哪里可以找到CSS中用于颜色计算的公式？

Question

我的问题是有关CSS属性的源代码。

例如，不透明属性。我想知道颜色是如何计算出来的。

我将要描述的方法给出了与截图和读取颜色相同的RGB值。

这里是html & css文档，目标是了解它将显示的颜色。

​

#div1 {
  opacity: 0.6;
  background-color: rgba( 155 , 66 , 200 , 0.5 );
  width:200px;
  height: 200px;
}

#div2 {
  background-color: rgba( 0, 77 , 100 , 0.8 );
  width: 200px;
  height: 200px;
}

<div id="div1" >
    <div id= "div2"></div>
 </div>

​

首先，我计算复合颜色: co。

 co = Cs * as + Cb * ab * ( 1 - as)  
 ao = as + ab * ( 1 - as )

Cs和as是div2的RGB和alpha。

Cb和ab是div1的RGB和alpha。

co = ( 0 , 77/255 , 100/255 ) * 0.8 + ( 155/255 , 66/255 , 200/255 ) * 0.5 * ( 1 - 0.8 )  
co = ( 0.06 , 0.267 , 0.392 )  
ao = 0.8 + 0.5 * ( 1 - 0.8 )  
ao = 0.9  

这是一个premultiplied颜色: RGBA =( 0.06，0.267，0.392，0.9)

现在我应用不透明：

(*)将结果--预乘颜色--乘以不透明度的值。

       =  ( R , G , B , A )  \* opacity       =  ( 0.06 , 0.267 , 0.392 , 0.9)   \* 0.6     =  ( 0.036 , 0.1602 , 0.2352 , 0.54 ) 

现在，我们提取这个预乘值的颜色分量，

我们将( 0.036，0.1602，0.2352 )除以0.54：

( 0.07 , 0.27 , 0.43 )

我们用背景颜色(白色)组成结果：

color_screen = ( 0.07 , 0.27 , 0.43 ) * 0.54  + ( 1 , 1 , 1 ) * 1 * ( 1 - 0.54 )  

这个结果与截图后测量的结果相对应。

最后，我的问题是:它涉及步骤(*)，

我把不透明度应用在预乘颜色上。

这就是给我最终结果相当于截图的原因。

简单地说，如果我的结果与理论相符：

为什么将不透明度应用于预倍增的颜色？

以下是两种可能的方案，我想知道为什么

它似乎是第一个被选中的：

第一种可能性

1:混合、合成

2：(r，g，b，a) =合成后的乘积值

3:对这个乘数前的值应用不透明度：(r*不透明，g*不透明，b*不透明，a*不透明)

4:提取颜色成分：

(r *不透明度/ (a *不透明度)、g*不透明度/ (a *不透明度)、b*不透明度/ (a *不透明度)、a*不透明度)

=( r/a，g/a，b/a，a*不透明)

第二种可能性

1:混合、合成

2：(r，g，b，a) =合成后的乘积值

3:提取颜色成分：(r/a，g/a，b/a，a)

4:在此颜色上应用不透明度：( r/a *不透明，g/a *不透明，b/a *不透明，a*不透明)

为什么第一种方法似乎已经被选择了？或者找到消息来源?

Answer 1

我想你的答案就在这里：https://drafts.csswg.org/css-color-3/#opacity

不透明度可以被认为是一种后处理操作。从概念上讲，在将元素(包括其后代)呈现到RGBA屏幕外映像后，不透明度设置指定如何将屏幕外呈现与当前的复合呈现混合。有关详细信息，请参阅简单的alpha组合。

如果您遵循链接，您可能会找到更多的细节。

Answer 2

好吧，我错了。不透明度仅乘以α，而不是R、G和B。

第二种可能性(修改) :

1:混合、合成

2：(r，g，b，a) =合成后的乘积值

3:提取颜色成分：(r/a，g/a，b/a，a)

4：在这种颜色的上涂上不透明度：( r/a，g/a，b/a，a*不透明度)

，所以我找到了和我的第一次可能性一样的结果

第一种可能性的计算与screenshot...but的计算结果是一致的，这次计算是一致的！