1

Suppose I have divs that represent a person's available times. Different persons' availabilities may overlap. I want to represent this with overlapping colored divs where overlapping regions will sum sensibly, in that regions representing the overlap of ALL persons will always be the same color (hence the term "normalize").

I have two overlapping divs that need to be the same opacity and background color, but the overlapping region's opacity needs to be normalized to 1. This cannot be done with the opacity property, since the opacity of the second layer would have to be 1. Can it be done with the mix-blend-mode property, and perhaps modulating the background color as well?

enter image description here

If, for instance, there are 3 divs, and all 3 overlapped for some region, that region would need to be the same final color as in the initial scenario (only 2 regions, and those overlapping for some portion).

Community
  • 1
  • 1
T3db0t
  • 3,491
  • 4
  • 28
  • 45

1 Answers1

0

you could maybe use absolute positioning and opacity together? so give each div the same opacity and place one div over the other to effectively sum the backgrounds. 

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

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

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

Something like this JsFiddle

theTaoOfJS
  • 206
  • 2
  • 3