Is there a way to ensure that when overlaying two divs with semi-transparent backgrounds, the opacity of each div does not add to one another?
In simple terms, I want to maintain consistent color between the two divs even when they overlap. I have created a Codepen to demonstrate the issue (where the green appears darker). Codepen
<style>
.div1{
background-color: rgba(20,101,20,0.5);
height: 100px;
width: 100px;
}
.div2{
background-color: rgba(20,101,20,0.5);
height: 100px;
width: 100px;
position: relative;
top: -10px
}
</style>
<div class="div1"></div>
<div class="div2"></div>