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

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

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

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

最终结果如预期: