我已经尝试了很多种不同的方法,但无法使 .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和包装器作为兄弟元素并排放置。然而,所有元素仍然混合在一起。
transforms
也会创建一个堆叠上下文,这可能会对混合产生负面影响,具体取决于它的使用方式。 - Bryce Howitson