"opacity" property

74 views
Skip to first unread message

letochagone

unread,
Sep 14, 2022, 2:07:00 PM9/14/22
to Chromium HTML5

My question is about CSS properties source code

for example the opacity property. I wanted to understand how the color is calculated.
The method I'm going to describe gives the same RGB values that I get after taking a screenshot and reading the colors.

Here is the html & css document, the goal is to understand the color it will display.



<div id="div1" >

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

</div>

#div1 {

  opacity: 0.6;

  background-color: rgba( 155 , 66 , 200 , 0.5 );

 }

 #div2 {

  background-color: rgba( 0, 77 , 100 , 0.8 );

}

to calculate the color without there being the opacity property, I think I understood, since the result of the following formula corresponds to the displayed result :

first i calculate the composite color : co

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

ao = as + ab * ( 1 - as )

Cs and as is the RGB and alpha of div2
Cb and ab is the RGB and alpha of div1


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

now, how to introduce in this calculation, the impact of the "opacity'" property ?


Reply all
Reply to author
Forward
0 new messages