Как наложить цвет на png картинку не используя прозрачную область?

Здравствуйте. Собственно интересует, как наложить цвет на картинку не затрагивая при этом прозрачную область. Сразу скажу, что требуется наложить градиент с жестким переходом. На одном из сайтов увидел, что там добавляются 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/