且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用 CSS Mix-Blend-Modes 隔离:如何防止元素与父元素混合

更新时间:2023-12-01 23:42:28

我会考虑一个额外的包装器,您可以在其中设置 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>