Hello. Actually, it is interesting how to impose color on the picture without affecting the transparent area. I must say that it is necessary to impose a gradient with a hard transition. At one of the sites I saw that there are added a div on top of the image with the background color, but I don’t understand how it works.

In general, it should look something like this:

Initial picture:

It should be:

Must be able to move:

Thanks in advance for the answers! :)

  • Comments are not intended for extended discussion; conversation moved to chat . - Nicolas Chabanovsky ♦

1 answer 1

<div class="base"> <div class="test t1"></div> <div class="test t2"></div> <div class="test t3"></div> <div class="test t4"></div> </div> 
 .base { width: 300px; height: 650px; overflow: hidden; position: relative; } .test { width: 300px; height: 200px; background-image: url(http://des1re.tk/img/Katarina_noBG_darkblue.png); background-size: 100%; position: absolute; } .t1 { top: 0px; background-position: 0px 0px; filter: sepia(100%) saturate(200) hue-rotate(40deg); } .t2 { top: 200px; background-position: 0px -200px; filter: sepia(100%) saturate(200) hue-rotate(130deg); } .t3 { top: 400px; background-position: 0px -400px; filter: sepia(100%) saturate(200) hue-rotate(220deg); } .t4 { top: 600px; background-position: 0px -600px; filter: sepia(100%) saturate(200) hue-rotate(310deg); }

https://jsfiddle.net/z0erLxh2/