Прокрутка вниз изменить фоновое изображение

Question

Я хочу сделать, пока я прокручиваю новое изображение, чтобы показать. Я уже добавил два изображения. Я пробовал «https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_bg_change_scroll» с двумя изображениями, но что-то пошло не так в моем коде. не знаю почему, но они не работают, я хочу быть в тексте демонстрационной функции на изображении 1 и demo1 на втором изображении с их кнопкой нажатия. Ясно, что я имею в виду те коды, которые я хочу, чтобы они были на изображениях, когда Я запускаю его, они go вниз с изображения.

>

 <p id="demo">Top 5 Tv shows,is Prison Break,Wayward
> Pines,Mentalist,Lost,Usa shooter</p>
on the first image

<p id="demo1">Top 5 movies,is Prison Break,Wayward
> Pines,Mentalist,Lost,Usa shooter</p>
for the second image.

и

Answer 1

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

Для этого просто поместите текст в соответствующие элементы div:

<div class='container first-container'>
   <p>Top 5 Tv shows,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>
</div>
<div class='container second-container'>
   <p>Top 5 movies,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>
</div>

И в CSS поместите фон для каждого контейнера:

/* Your reset part */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Elements */
.container{
  /* Full height */
  height: 50%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.first-container{
  background: url('img-1.jpg');
}
.second-container{
  background: url('img-2.jpg');
}

Пример здесь: https://codepen.io/thomas-lamothe/pen/WNQjpmv