Как остановить смешение между слоями?

Question

Я играю с режимами смешивания, чтобы получить комбинированное изображение с рубашкой и карманом. Все это выглядело хорошо, когда я был на месте только рубашкаVer и shirtHor слоев. Я мог бы комбинировать их и менять цвета шаблона шашек без проблем. Затем я захотел добавить карман и сделал это. Но поскольку они смешиваются, умножая конечный результат, получается смесь всех четырех слоев. И этого я не хочу достичь.

Как я могу достичь, что есть перерыв в смешении между (рубашка + рубашкаHor) и (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'); 
} 

И конечный результат, как и ожидалось: