我正在尝试使用混合模式来获得包含衬衫和口袋的组合图像。当我只有 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');
}
当前结果如下所示,您可以看到衬衫和口袋混合在一起。
最佳答案
感谢一位亲爱的 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');
}
最终结果如预期:
关于html - 如何停止图层之间的混合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35024295/