Experimenting with blend modes has led me to create a composite image featuring a shirt and a pocket. Initially, everything seemed fine when I only had the shirtVer and shirtHor layers. I could easily merge them and adjust the colors of the checkered pattern without any issues. However, upon adding the pocket layer and blending them using multiply, the final output ended up combining all four layers, which was not my intended result.
Is there a way to create a distinction in the blending between (shirtVer + shirtHor) and (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');
}
The current outcome displays the shirt and pocket blended together as shown in the following image: