CSS：重複しているブレンドされたdivの透明度を正規化

Question

人の利用可能時間を表すdivがあるとします。異なる人の利用可能性が重複する可能性があります。私は、すべての人物の重なりを表す領域が常に同じ色になるという点で、オーバーラップ領域が合理的に合わされる重複したカラーdivで表現したいとします（したがって、「正規化」という用語）。

私は、同じ不透明度と背景色である必要が重複する2つのdivを持っていますが、重複領域の不透明度は、これはopacityプロパティ、since the opacity of the second layer would have to be 1で行うことができない1に正規化する必要があります。 mix-blend-modeのプロパティを使ってやることができますか？また、背景色を調整することもできますか？

例えば、3つのdivがあり、そしてすべての3つは、いくつかの領域に対して重ね、その領域は初期シナリオ（わずか2領域、及びそれらの重複と同じ最終的な色にする必要がある、場合いくつかの部分について）。

Answer 1

絶対配置と不透明度を一緒に使用できますか？各divに同じ不透明度を与え、もう一方のdivを配置してバックグラウンドを効果的に合計します。

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

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

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

このJsFiddle

ような何かを