Изоляция с помощью CSS Mix-Blend-Modes: как предотвратить смешивание элементов с родительским - PullRequest
Новая
       55

Изоляция с помощью CSS Mix-Blend-Modes: как предотвратить смешивание элементов с родительским

0 голосов
/ 26 февраля 2019

Я пробовал это разными способами, и не могу сделать так, чтобы div .pink и .green смешивались друг с другом, но не с цветом фона родительского элемента .wrapper. 

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
  isolation: isolate;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div class="pink"></div>
  <div class="green"></div>
</div>

Или посмотрите на скрипку: https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

Моя цель - просто получить розовый и зеленый div, которые смешиваются друг с другом, ижить на черном фоне, с которым они не смешиваются.

Я пытался использовать абсолютное положение, сидя розовые / зеленые div и обертка рядом друг с другом, как братья и сестры.Однако все элементы все еще смешаны.

1 Ответ

0 голосов
/ 26 февраля 2019

Я бы выбрал дополнительную обертку, где вы установите z-index, чтобы создать контекст разбивки, таким образом, элемент больше не будет смешиваться с синим элементом: 

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
}
.wrapper > div {
  position:absolute;
  height: 100vh;
  left:0;
  right:0;
  z-index:0;
  top:0;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div>
    <div class="pink"></div>
    <div class="green"></div>
  </div>
</div>

Все в CSS, которое создает стековый контекст , должно рассматриваться как «изолированная» группа .Сами элементы HTML не должны создавать группы.

Элемент, к которому применено смешивание, должен смешиваться со всем базовым содержимым контекста стека [CSS21], к которому принадлежит этот элемент. ref

Таким образом, основной трюк заключается в том, чтобы элементы находились в контексте стека, где синий элемент не принадлежит.Если элемент-обертка является их непосредственным родительским элементом, не составит труда сделать их в другом контексте стека, поэтому вам не понадобится дополнительная обертка.

Изоляция вам не поможет, потому что она простосделайте обертку, создающую контекст стека, чтобы она не изолировала обертку от дочернего элемента, а от всех элементов снаружи.если вы примените его к дополнительной оболочке, он будет работать точно так же, как установка z-index или любого другого свойства, которое создает контекст стека. 

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
}
.wrapper > div {
  position:absolute;
  height: 100vh;
  left:0;
  right:0;
  isolation:isolate;
  top:0;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div>
    <div class="pink"></div>
    <div class="green"></div>
  </div>
</div>
...