html - 使用 CSS 混合混合模式隔离 : how to prevent elements from blending with parent

Question

我已经尝试了很多不同的方法，但无法使 .pink 和 .green div 彼此混合，但父元素 .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>

或者，参见 fiddle :https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

我的目标只是让粉红色和绿色的 div 彼此融合，并位于黑色背景之上，它们不融合。

我尝试使用绝对位置，并将粉红色/绿色 div 和包装器放在一起，就像 sibling 一样。然而，所有元素仍然混合在一起。

Answer 1

我会考虑一个额外的包装器，您可以在其中设置一个 z-index 以创建一个 staking 上下文，因此该元素将不再与蓝色元素混合:

.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>

Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.

An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to. ^ref

所以主要技巧是让元素处于蓝色元素不属于的堆叠上下文中。如果包装器元素是它们的直接父元素，那么将它们置于不同的堆叠上下文中并不是一件容易的事，因此需要一个额外的包装器。

---

隔离不会帮助你，因为它只会让包装器创建一个堆叠上下文，所以它不会将包装器与其子元素隔离，而是与外部的所有元素隔离。如果你将它应用于额外的包装器，它的工作方式与设置 z-index 或 any other property that create a stacking context. 完全一样。

.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>