I managed to solve the example to get the SCREEN color of div2:
first we apply the simple alpha compositing formula:
co = Cs x as + Cb x ab x (1 – as) ; ao = as + ab (1-as)
here :
{div2} Cs = (100/255, 200/255, 50/255) ; as = 0.5
{div1} Cb = (22/255, 177/255, 200/255) ; ab = 0.4
….
co = ( 0.213 , 0.53 , 0.25 )
ao = 0.7
NOW WE APPLY the opacity. In my example I set it to 0.7 , (it’s the same value as the result of ao but it’s a coincidence)
and that’s what I was looking for: how to apply opacity in color calculation formulas
co = co * 0.7
ao = ao * 0.7
In my question I gave the link:
https://www.w3.org/TR/css-color-3/#transparency
and an excerpt from the passage that I did not understand
on this site:
“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 alphavalue”
i understand now the : “using a mask” means doing this : multiply RGBA,( co and ao), by opacity
co = ( 0.213 * 0.7 , 0.53 * 0.7 , 0.25 * 0.7 ) ; ao = 0.7 * 0.7
co= (0.15, 0.37, 0.18)
ao = 0.49
the rest is the calculation of the color obtained after “opacity” on the background :
We compose with the color of the background:
(note co is premultiplied, so we apply :
= Cs + Cb * ab * (1-as)
Cs is the color calculated previously (premultiplied) : (0.15 0.37
0.18)
Cb is the background color (77/255 , 100/255 , 150/255) ab=1
= ( 0.30 , 0.57 , 0.48 )
a screenshot of div2 gives the same color
solved question about setting ‘opacity’ property