使用 CSS Mix-Blend-Modes 隔离:如何防止元素与父元素混合 [英] Isolation with CSS Mix-Blend-Modes: how to prevent elements from blending with parent

问题描述

我已经尝试了很多不同的方法，但无法使 .pink 和 .green div 相互混合，而不是父元素 .wrapper 的背景颜色.

.wrapper {背景颜色:蓝色；高度:100vh；宽度:100%；隔离:隔离；}.粉色的 {背景:hotpink；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；左:10%；混合模式:乘法；}.绿色 {背景:柠檬绿；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；正确:10%；混合模式:乘法；}

<div class="粉红色"></div><div class="green"></div>

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

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

我尝试使用绝对位置，并将粉红色/绿色 div 和包装纸放在一起，作为兄弟姐妹.然而，所有元素仍然融合在一起.

解决方案

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

.wrapper {背景颜色:蓝色；高度:100vh；宽度:100%；}.wrapper >div {位置:绝对；高度:100vh；左:0;右:0;z-索引:0；顶部:0;}.粉色的 {背景:hotpink；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；左:10%；混合模式:乘法；}.绿色 {背景:柠檬绿；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；正确:10%；混合模式:乘法；}

<div><div class="粉红色"></div><div class="green"></div>

<块引用>

CSS 中创建堆叠上下文的所有内容都必须被视为一个孤立"组.HTML 元素本身不应创建组.

应用了混合的元素，必须与该元素所属的堆叠上下文的所有底层内容混合 [CSS21].^ref

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

---

隔离不会帮助你，因为它只会让包装器创建一个堆叠上下文，所以它不会将包装器与其子元素隔离，而是与外部的所有元素隔离.如果你把它应用到额外的包装器上，它会像设置 z-index 或 任何其他创建堆叠上下文的属性.

.wrapper {背景颜色:蓝色；高度:100vh；宽度:100%；}.wrapper >div {位置:绝对；高度:100vh；左:0;右:0;隔离:隔离；顶部:0;}.粉色的 {背景:hotpink；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；左:10%；混合模式:乘法；}.绿色 {背景:柠檬绿；高度:80%；宽度:50%；位置:绝对；z-索引:1；顶部:0；正确:10%；混合模式:乘法；}

<div><div class="粉红色"></div><div class="green"></div>

I have tried this a lot of different ways, and cannot make it so that the .pink and .green divs blend with one another, but not the background color of the parent element, .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>

Or, see the fiddle: https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

My goal is simply to have a pink and green div that blend with eachother, and live atop a black background, with whom they do not blend.

I tried using absolute position, and sitting the pink/green divs and the wrapper next to one another, as siblings. However, all elements still blended.

解决方案

I would consdier an extra wrapper where you set a z-index in order to create a staking context thus the element will no more blend with the blue element:

.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

So the main trick is to have the elements in a stacking context where the blue element doesn't belong. If the wrapper element is their direct parent element it won't be trivial to make them in different stacking context thus the need of an extra wrapper.

---

Isolation won't help you, because it will simply make the wrapper creating a stacking context, so it won't isolate the wrapper from its child but from all the elements outside. if you apply it to the extra wrapper it will work exactly like setting z-index or 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>

这篇关于使用 CSS Mix-Blend-Modes 隔离:如何防止元素与父元素混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！