Divs 취소의 불투명도 오버레이

Question

반투명 배경 (같은 색)을 가진 두 div를 오버레이하려고합니다. 불투명도가 서로 겹치지 않을 때 어떻게 확신 할 수 있습니까?

간단히 말해서, 내가 묻는 것은 색상이 겹치는 경우에도 두 div의 일관성을 유지하는 방법을 묻는 것입니다. 나는 (녹색 어두운 곳) 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> 

Answer 1

희망이 문서에 도움을 당신이, 당신

http://cssnerd.com/2012/01/07/overlapping-transparent-divs-with-one-border/

에 대한 좋은 튜토리얼이 문제가 어디 있는지 보여줄 수있는 codepen를했습니다

Answer 2

장소 div1 및 div2을 컨테이너에 넣고 opacity: 0.6을 적용하십시오.

.container{ 
 
    opacity: 0.6; 
 
} 
 
.div1{  
 
    background-color: rgba(20,101,20,1); 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.div2{  
 
    background-color: rgba(20,101,20,1); 
 
    height: 100px; 
 
    width: 100px; 
 
    position: relative; 
 
    top: -10px 
 
}

<div class="container"> 
 
<div class="div1"></div> 
 
<div class="div2"></div> 
 
</div>