使用CSS混合混合模式进行隔离：如何防止元素与父代混合

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来创建放样上下文，这样该元素将不再与blue元素融合：

.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

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

---

隔离不会帮助您，因为隔离只会使包装器创建一个堆栈上下文，因此它不会将包装器与其子级隔离，也不会与外部的所有元素隔离。如果将其应用于额外的包装器，它将与设置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>