CSS에서 불투명도가 얼마나 불투명 스택입니까?

Question

나는 다음과 같은 경우 :

body { 
 
    background: #000; 
 
} 
 
div { 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
}

<div> 
 
    <span></span> 
 
</div>

최종 알파 값이 <span> 무엇을 할 것입니까?

Answer 1

80 %.

기본적으로 첫 번째 레이어는 60 %입니다. 두 번째 레이어는 나머지 부분 위에 50 %이므로 40 % == 20 % ... 60 % + 20 % = 80 % 중 50 %가됩니다.

위에 25 % div를 추가하면 85 % 불투명 : 0.80 + ((1-80) * .25) = 0.85 %가됩니다.

모든 레이어를 함께 처리 할 수있는 알고리즘 기능이 있지만 스크립트와 루프를 사용하여 계산하는 것은 쉽습니다.