使用 CSS Mix-Blend-Modes 进行隔离：如何防止元素与父元素混合

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>

或者，看小提琴：https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

我的目标只是让粉红色和绿色的 div 相互融合，并生活在黑色背景上，它们不会与之融合。

我尝试使用绝对位置，并将粉红色/绿色 div 和包装器作为兄弟姐妹并排放置。但是，所有元素仍然混合在一起。

Answer 1

我会考虑一个额外的包装器，您可以在其中设置 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 或 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>