如何停止图层之间的混合？

Question

我正在尝试使用混合模式来实现一张包含衬衫和口袋的合成图像。当我只有shirtVer 和 shirtHor 图层时，一切看起来都很好。我可以将它们组合并更改棋盘格纹理的颜色，没有问题。然后我想添加口袋，并这样做了。但是因为它们使用乘法混合，最终的结果会成为所有四个图层的混合。这不是我想要的。

我怎样才能在 (shirtVer+shirtHor) 和 (pocketVer+pocketHor) 之间实现混合中断？

HTML

<span class="img-position shirtVer">
</span>
<span class="img-position shirtHor">
</span>
<span class="img-position pocketVer">
</span>
<span class="img-position pocketHor">
</span>

CSS

.img-position {
    position: absolute;
    top: 200px;
    left: 0px;
    display: block;
    width: 768px;
    height: 768px;
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}

.shirtHor {
    background-color: red;
    background-image: url('img/shirtHor.png');
    -webkit-mask-image: url('img/shirtHor.png');
}

.shirtVer {
    background-color: blue;
    background-image: url('img/shirtVer.png');
    -webkit-mask-image: url('img/shirtVer.png');
}

.pocketHor {
    background-color: yellow;
    background-image: url('img/pocketHor.png');
    -webkit-mask-image: url('img/pocketHor.png');
}

.pocketVer {
    background-color: blue;
    background-image: url('img/pocketVer.png');
    -webkit-mask-image: url('img/pocketVer.png');
}

当前结果如下所示，您可以看到衬衫和口袋混合在一起。

- pjotr_dolphin

Answer 1

感谢一位亲爱的朋友，我找到了一个解决方案。我添加了一个中间层，该层具有基本形状，并且不在该层上执行混合。解决方案：

HTML

<span class="img-position shirtVer mix">
</span>
<span class="img-position shirtHor mix">
</span>
<span class="img-position pocketBase">
</span>
<span class="img-position pocketVer mix">
</span>
<span class="img-position pocketHor mix">
</span>

CSS

.img-position {
    position: absolute;
    top: 200px;
    left: 0px;
    display: block;
    width: 768px;
    height: 768px;
    background-blend-mode: multiply;
}

.mix {
    mix-blend-mode: multiply;
}

.shirtHor {
    background-color: red;
    background-image: url('img/shirtHor.png');
    -webkit-mask-image: url('img/shirtHor.png');
}

.shirtVer {
    background-color: blue;
    background-image: url('img/shirtVer.png');
    -webkit-mask-image: url('img/shirtVer.png');
}

.pocketBase {
    background-image: url('img/pocketFull.png');
    -webkit-mask-image: url('img/pocketFull.png');
}

.pocketHor {
    background-color: yellow;
    background-image: url('img/pocketHor.png');
    -webkit-mask-image: url('img/pocketHor.png');
}

.pocketVer {
    background-color: blue;
    background-image: url('img/pocketVer.png');
    -webkit-mask-image: url('img/pocketVer.png');
}

最终结果，如预期所示：

- pjotr_dolphin