2

我已经尝试了很多不同的方法，但无法使 .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 和包装器彼此相邻，作为兄弟姐妹。但是，所有元素仍然混合在一起。

4

1 回答 1

2

我会考虑一个额外的包装器，您可以在其中设置 az-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] 的所有底层内容混合。参考

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

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

于 2019-02-25T22:18:57.327 回答