3

Здравствуйте. Собственно интересует, как наложить цвет на картинку не затрагивая при этом прозрачную область. Сразу скажу, что требуется наложить градиент с жестким переходом. На одном из сайтов увидел, что там добавляются div поверх картинки с цветом фона, но как это работает - я не понял.

В общем должно выглядеть как-то так:

Начальная картинка:

Как должно быть:

Должна быть возможность двигать:

Заранее спасибо за ответы! :)

1

1 ответ 1

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/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.