Как применять линейные градиенты для всей веб-страницы при наличии нескольких разделов с 100vh? - PullRequest
Новая
       28

Как применять линейные градиенты для всей веб-страницы при наличии нескольких разделов с 100vh?

0 голосов
/ 18 июня 2019

Я хотел бы иметь линейный градиент для всего моего сайта с использованием HTML / CSS - начиная от одного цвета (скажем, красного) в начале до другого (скажем, синего) в конце.Когда пользователи запрашивают страницу, они сначала видят синий фон, постепенно переходящий в красный фон при прокрутке вниз.Сайт должен быть разделен на разделы, каждый из которых заполняет весь экран.

Проблема заключается в том, что когда я разделяю веб-сайт разделами, используя 100vh, линейный градиент повторяется для каждого раздела, а не линейно изменяется по разделам.

Вот код, который я использовал до сих пор: 

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
  background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
  background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
  background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
  background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section {
  height: 100vh;
}
<section>
  <div class="">first section</div>
</section>
<section>
  <div class="">second section</div>
</section>

Есть идеи о том, как расширить линейный градиентный фон на секции?Любая помощь приветствуется!

1 Ответ

0 голосов
/ 18 июня 2019

Возможно, это не совсем то, что вам нужно, но вы можете достичь желаемого, настроив процентное соотношение градиента.Я добавил разные градиенты в каждую секцию и установил background-attachment на static.

Если вам нужен другой эффект, вам, возможно, придется использовать Javascipt / jQuery. 

* {
    margin: 0;
    padding: 0;
}
body > section:nth-child(1) {
 background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
    background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
}
body > section:nth-child(2) {
 background-image: -ms-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
    background-image: -moz-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
    background-image: -o-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #ffffff));
    background-image: -webkit-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
    background-image: linear-gradient(to top, #39a7cc 30%, #ffffff 100%);
}
section {
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: static;
}
<section>
    <div class="">first section</div>
</section>
<section>
    <div class="">second section</div>
</section>
...