Child and parent element, both with RGBA backgrounds. How do I determine the "equivalent" rgba?

Question

Say I have:

<div class="dark">
    <div class="lite"></div>
</div>

<div class="medium"></div>

and some css:

.dark {background:rgba(10,10,10,0.8);}
.lite {background:rgba(200,200,200,0.5);}

What calculation is needed if I want medium to have the same rgba value as the combined dark > lite? I thought a simple normalized calculation (normalize each color component and multiply) would work but this doesn't seem to be the case.

Answer 1

Such calculation cannot be done using CSS, but your goal can be achieved using background-blend-mode: multiply. However, this is not widely supported yet: http://caniuse.com/#feat=css-backgroundblendmode .

You probably need a JavaScript solution for that, check out those plugins for jQuery: https://github.com/farski/jquery-blend/ https://github.com/jquery/jquery-color/

Also, depending on the nature of your problem it may be possible to solve it using CSS precompilers but that will work only if you need to get this color once, and not dynamically.

In LESS this would be as simple as this:

@dark: rgba(10,10,10,0.8);
@lite: rgba(200,200,200,0.5);

.dark {background: @dark;}
.lite {background: @lite;}
.medium {  
    background-color: mix(@dark, @lite, 50%);  
}