CSS: нормализация прозрачности для перекрытия, смешанные divs

Предположим, у меня есть divs, которые представляют собой доступные времена человека. Доступность разных лиц может перекрываться. Я хочу представить это с перекрывающимися цветными div, в которых перекрывающиеся области будут суммироваться разумно, в тех регионах, которые представляют перекрытие ВСЕХ людей, всегда будет одного цвета (отсюда и термин «нормализовать»).

У меня есть два перекрывающих div, которые должны быть одинакового непрозрачности и цвета фона, но непрозрачность перекрывающейся области должна быть нормализована до 1. Это невозможно сделать с помощью opacityсвойства, так как непрозрачность второго слоя должна быть равна 1 . Можно ли это сделать с помощью mix-blend-modeсвойства и, возможно, модулировать цвет фона?

введите описание изображения здесь

Если, например, есть 3 divs, и все 3 перекрываются для некоторой области, этот регион должен быть того же окончательного цвета, что и в исходном сценарии (только 2 области и перекрытия для некоторой части).

javascript,html,css,

1

Ответов: 1


0

вы могли бы использовать абсолютное позиционирование и непрозрачность вместе? поэтому дайте каждому 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

JavaScript, HTML, CSS,
Похожие вопросы