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

Question

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

3

我已经尝试了很多种不同的方法，但无法使 .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和包装器作为兄弟元素并排放置。然而，所有元素仍然混合在一起。

- Gretie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

我建议再加一层包装，给它设置一个 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>