0

Извините за такой глупый вопрос. Есть фоновая картинка, и по макету на этой картинке есть два, идентичных по цвету, градиента, но под разными углами. У меня возник вопрос, возможно ли установить, с помощью css или js, поверх картинки 2 или более слоев прозрачного градиента, не прибегая к простому редактированию картинки в редакторе. Буду благодарен за помощь.

1
  • в целом - да, но лучше взглянуть на макет Commented 3 дек. 2019 в 17:12

1 ответ 1

1

Можно сделать один элемент над изображением и в нем все градиенты собрать через background-blend-mode. Пример и описание есть тут: https://webformyself.com/effekty-rezhimov-nalozheniya-fona-css/

Можно отдельными элементами собирать градиент сверху - зависит от ваших дальнейших взаимодействий и желаний. Пример с двумя блоками сверху:

.test {
  position: relative;
  width: 200px;
  height: 400px;
  
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.test .test__img {
  height: 100%;
  width: auto;
}

.test__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.test__gradient--left {
  background: linear-gradient(45deg, rgba(0,0,255,0), rgba(0,0,255,.3));
}

.test__gradient--right {
  background: linear-gradient(-45deg, rgba(255,0,0,0), rgba(255,0,0,.3));
}
<div class="test">
  <img class="test__img" src="https://avatars.mds.yandex.net/get-pdb/368827/34d844fa-c68c-48b7-92a8-102ea556b824/s1200" alt="flamingo">
  <div class="test__gradient test__gradient--left"></div>
  <div class="test__gradient test__gradient--right"></div>
</div>

1
  • Для минимизации можно было поместить оба градиента в один блок, либо в псевдокласс
    – MoloF
    Commented 3 дек. 2019 в 18:06

Ваш ответ

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