색상 혼합을 표시하는 DIV의 겹침

Question

이 두 DIV의 겹침을 볼 수 있습니까? ?

<div style="position:relative;margin-top:100px;width:500px;height:300px;"> 
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute;"></div> 
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>   
</div> 

최신 CSS3 또는 심지어 -webkit- 속성 만 사용하는 경우에도 작동합니다.

Answer 1

거의 대부분의 경우 오버레이 된 div에 불투명도를 설정해야합니다. 귀하의 의견을 읽고 나면

#parent { 
    position:relative; 
    margin-top:100px; 
    width:500px; 
    height:300px; 
} 

#one { 
    background-color:rgba(23, 170, 180, 1); 
    width:60px; 
    height:145px; 
    position:absolute; 
} 

#two { 
    background-color:rgba(249, 177, 67, 0.5); 
    width:110px; 
    height:70px; 
    position:absolute; 
} 

http://jsfiddle.net/VAWPK/

---

하고 싶지 않아보고 : 당신은 이미 rgba() 색상 값, 하나보다 낮은 값으로 설정해야 1 단지 마지막 단위를 사용하고 알파 값이나 불투명도에 영향을받는 div의 중첩되지 않은 부분 인 경우 Nathan Lee와 연결된 <canvas>/javascript 플러그인을 조사해야합니다.

Answer 2

난 당신이

<div style="position:relative;margin-top:100px;width:500px;height:300px;"> 
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute; z-index: 1; 
opacity: 0.5; left: 25px;"></div> 
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>   
</div> 

볼이 도움이 될 희망이 시도이 http://jsfiddle.net/xu8n5/1/