CSS : 겹치는 블렌딩 된 div의 투명도 정규화

Question

사람의 사용 가능 시간을 나타내는 div가 있다고 가정 해 보겠습니다. 다른 사람의 가용성은 겹칠 수 있습니다. 나는 모든 사람의 겹침을 나타내는 영역이 항상 같은 색이 될 것이라는 점에서 겹치는 영역이 합리적으로 합쳐지는 겹치는 색 ​​div로 나타내기를 원합니다 (그러므로 "정규화"라는 용어).

동일한 불투명도와 배경색이 필요한 두 개의 겹치는 div가 있지만 겹치는 영역의 불투명도를 1로 정규화해야합니다. 속성 인 since the opacity of the second layer would have to be 1을 사용할 수 없습니다. mix-blend-mode 속성을 사용하여 수행 할 수 있으며 배경색을 변조해도됩니까?

예를 들어, 3 명 div가있다, 경우

및 3은 그 영역이 초기 시나리오 (단지 2 개 영역, 및 그 중첩과 동일한 최종 색상 될 필요가 일부 영역에 대해 중복 일부분).

Answer 1

절대 위치 지정과 불투명도를 함께 사용할 수 있습니까? 각 div에 동일한 불투명도를 지정하고 다른 div에 하나의 div를 배치하여 배경을 효과적으로 합산하십시오. 이 JsFiddle

같은

.container { 
    position: relative; 
    height: 200px; 
} 

.box { 
    height: 100px; 
    width: 100px; 
    background: #000099; 
    border: 1px solid #fff; 
    opacity: 0.5; 
} 

.two { 
    position: absolute; 
    top: 80px; 
} 

뭔가