Как создать прозрачный градиент, который сочетается с цветом изображения?

Question

Я хотел бы создать градиент, который выбирает основные цвета изображения и создает подходящий градиент наложения, чтобы он немного соответствовал изображению.

Как на этом сайте: https://www.themoviedb.org/tv/69050-riverdale

Answer 1

Вы можете использовать CSS background-blend-mode для этого.

Что это?

Вот пример background-blend-modeс фильтром screen:

body, html {
  height: 960px;
  width: 640px;
  margin: 0;
}

body {
  background-color: #3EA8E2;
  background-image: url(https://i.imgur.com/OUzUdxe.jpg);
  background-size: 640px 960px;
  background-repeat: no-repeat;
  background-blend-mode: screen;
}

body:hover {
  background-blend-mode: normal;
}