Javascript CSS：规范重叠、混合div的透明度

假设我有代表一个人可用时间的div。不同人员的可用性可能重叠。我想用重叠的彩色div表示这一点，其中重叠的区域将合理地求和，因为表示所有人重叠的区域将始终是相同的颜色（因此术语“规格化”）

我有两个重叠的div，需要具有相同的不透明度和背景色，但重叠区域的不透明度需要规格化为1。这不能通过

不透明度
属性来完成。是否可以使用
混合模式
属性完成，或者也可以调整背景色


例如，如果有3个div，并且某个区域的所有3个div都重叠，则该区域需要与初始场景中的最终颜色相同（只有2个区域，某些部分重叠）。
您可以同时使用绝对定位和不透明度？因此，给每个div赋予相同的不透明度，并将一个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;
}

类似这样的东西
您可以同时使用绝对定位和不透明度？因此，给每个div赋予相同的不透明度，并将一个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;
}

像这样的