Изменить цвет фиксированного фонового изображения при прокрутке

Question

После нескольких часов поиска я не нашел никакого решения.

То, что я хочу сделать, довольно просто: моя страница имеет фиксированное фоновое изображение, поэтому она не перемещается при прокрутке вниз /вверх, это нормально. Но так как моя страница разделена на разделы (это своего рода резюме, такие разделы, как навыки, опыт работы и т. Д.), Я бы хотел, чтобы фоновое изображение на плавно меняло цвет при прокрутке, поэтомуцвет каждого раздела различен.

К сожалению, я не знаю ни одного веб-сайта, который ведет себя таким образом, поэтому я не могу привести ни одного примера.

Какой самый простой способ добиться этого

Answer 1

В зависимости от того, как вы хотите раскрасить, определите метод. Если раскраска сложная, как может сделать только фотошоп, вы должны сделать несколько ее версий и поместить их в свои элементы как

background-attachment: fixed;

... и сохранить тот же фон-положение для всех них.

Если вам нужен только прозрачный, слишком цветной, это можно сделать с помощью CSS и прозрачных фоновых цветов: rgba().

HTML

<main-background>
  <section-one></section-one>
  <section-two></section-two>
  <section-three></section-three>
  <section-four></section-four>
  <section-five></section-five>
</main-background>

CSS

body {
  margin: 0;
}
main-background {
  display: flex;
  background: url(https://cdn.cjr.org/wp-content/uploads/2019/07/AdobeStock_100000042-e1563305717660-1300x500.jpeg) no-repeat fixed 50% 50% / cover;
  height: 100vh;
  width: 100vw;
  flex-wrap: wrap;
  overflow: auto;

  > * {
    flex: 1;
    min-width: calc(100%/3);
    min-height: 75%;
  }
}

section-one {
  background: rgba(234,123,213,0.3)
}

section-one {
  background: rgba(234,123,213,0.3)
}

section-two {
  background: rgba(234,123,0,0.3)
}

section-three {
  background: rgba(0,123,213,0.3)
}

section-four {
  background: rgba(0,0,132,0.3)
}

section-five {
  background: rgba(111,222,0,0.3)
}

Ручка: https://codepen.io/bstees/pen/yLybMRz