CSS: Prevent summing color in opacited elements - html

Question

I have 3 overlapping html divs, one next to another, colored: red, green and blue. All elements have opacity 0.5. First two divs (red and green) I want to summate color (creates something between red and green) - standard behaviour, without changes here.
My problem is how to prevent summating colors only between green and blue divs?
It would be great if we could do this without additional elements.
html:
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
EDIT:
I forgot about: http://plnkr.co/edit/5MIduRMFo0dZ54xqzpAa?p=preview
It should look likt this (fourth element is to show that blue also has opacity):

Answer 1

If you want to keep opacity of all divs to be still 0.5. Then here is your pure CSS solution. No additional elements added.
Here is a fiddle for that.
http://jsfiddle.net/tdh7ks2x/2/
**HTML**
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
**CSS**
#d2 {
opacity: 1;
height: 100px;
width: 120px;
left: 300px;
top: 80px;
}
#d2:before,
#d2:after{
content: "";
position :absolute;
left: 0;
top: 0;
height: 100px;
background-color: blue;
}
#d2:before{
width: 30px;
z-index: 2;
opacity: 0.99999999;
background-color: #7F7FFF;
}
#d2:after{
width: 120px;
z-index: 1;
opacity: 0.5;
}
#d4 {
width: 200px;
height: 80px;
left: 400px;
top: 90px;
background-color: red;
}
Just added this CSS instead of #d2, rest all your CSS is fine. Let me know if this resolves your issue.
Pick the color of the div with opacity and use it in the ":before" div.

Answer 2

You can use z-index property to bring a div to front or back. Higher the value of z-index to move it to the top and decrease it to move it back.
Moreover you have used opacity:0.5 due to which you will see the back colors at the intersection. You must increase the opacity to see the exact colors there
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
z-index:2
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:

Answer 3

Basically, this problems occurs due to overlapping transparent colors. Example is rgba(255,255,255,0.3) overlapping with rgba(255,255,255,0.3) to form a brighter color.
If your design can do without transparent colors, you can easily solve this by converting your transparent colors (rgba) to fully opaque ones (hex) for related elements.
You will need the background color to help compute a fully opaque hex from rgba or just use a color picker browser extension after rendering.