我已经尝试了很多不同的方法，但无法使 .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>
或者，看小提琴：
我的目标只是让粉色和绿色的 div 相互融合，并生活在黑色背景之上，与它们不融合。
我尝试使用绝对位置，并将粉色/绿色 div 和包装纸并排放置，就像兄弟姐妹一样。然而，所有元素仍然混合在一起。
我会考虑一个额外的包装，你可以在其中设置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 元素本身不应创建组。
An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to. ref https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
因此，主要技巧是将元素放在蓝色元素不属于的堆叠上下文中。如果包装器元素是它们的直接父元素，那么将它们置于不同的堆叠上下文中并不容易，因此需要额外的包装器。
隔离对您没有帮助，因为它只会使包装器创建一个堆叠上下文，因此它不会将包装器与其子级隔离，而是与外部的所有元素隔离。如果你将它应用到额外的包装器上，它将像设置一样工作z-index or 创建堆叠上下文的任何其他属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
