[css-color-3] the 'opacity' property

[letochagone]

in the paragraph https://www.w3.org/TR/css-color-3/#transparency , I would like to understand the following text:

If the object has children, then the effect is as if the children were blended against the current background using a mask where the value of each pixel of the mask is

Is it possible to illustrate it with an example including div s with their RGBA and an 'opacity'?

I mean, using , for example, the following formula: Cs = (1 - αb) x Cs + αb x B(Cb, Cs)

[svgeesus]

The opacity property operates independent of alpha, and apples to an entire subtree.

The effect is as if the whole subtree is rendered to an offscreen buffer, including any alpha transparency. That buffer is then blended against the current background, applying the opacity.

[letochagone]

OK, here's an example to see if I understood correctly:

<div id="div1" style="background-color: rgba(22, 177, 200, 0.4); opacity: 0.7;">
	<div id="div2" style="background-color: rgba(100,200,50,0.5);"></div>
</div>

call: Cs , as : rgba of the div2 Cb , ab : rgba of the div1 co the resulting color of div2 on div1:

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

co = (100/255, 200/255, 50/255) * 0.5 + ( 22/255 , 177/255 , 200/255 ) * 0.4 * (1 - 0.5) co = ( 0.213.. , 0.53.. , 0.254..) ao = 0.5 + 0.4 * ( 1 - 0.5 ) = 0.7

now we multiply co and ao by the opacity value that I gave in CSS: 0.7 (it's the same value as the result of ao but it's a coincidence) co * opacity = ( 0.213.. * 0.7 , 0.53.. * 0.7 , 0.254.. * 0.7 ) co * opacity = ( 0.15 , 0.37 , 0.18) ao * opacity = 0.7 * 0.7 = 0.49

I tested with a screenshot to compare the result (the background color is white (1,1,1,1)

co = ( 0.15 , 0.37 , 0.18) + ( 1 , 1 , 1 ) * 1 * ( 1 - 0.49) ( (0.15 , 0.37 , 0.18 ) is premultiplied co = ( 0.659 , 0.88 , 0.688 ) screenshot : ( 0.658 , 0.878 , 0.686)

GOOD !