Предположим, у меня есть divs, которые представляют собой доступные времена человека. Доступность разных лиц может перекрываться. Я хочу представить это с перекрывающимися цветными div, в которых перекрывающиеся области будут суммироваться разумно, в тех регионах, которые представляют перекрытие ВСЕХ людей, всегда будет одного цвета (отсюда и термин «нормализовать»).
У меня есть два перекрывающих div, которые должны быть одинакового непрозрачности и цвета фона, но непрозрачность перекрывающейся области должна быть нормализована до 1. Это невозможно сделать с помощью opacityсвойства, так как непрозрачность второго слоя должна быть равна 1 . Можно ли это сделать с помощью mix-blend-modeсвойства и, возможно, модулировать цвет фона?
Если, например, есть 3 divs, и все 3 перекрываются для некоторой области, этот регион должен быть того же окончательного цвета, что и в исходном сценарии (только 2 области и перекрытия для некоторой части).
вы могли бы использовать абсолютное позиционирование и непрозрачность вместе? поэтому дайте каждому 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