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

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');
}

目前的结果如下所示，你可以看到衬衫和口袋混在一起。

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');
}

最终结果如预期：