当有多个部分具有 100vh 时，如何为整个网页应用线性渐变

Question

我想使用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>

关于如何在部分上扩展线性渐变背景的任何想法？任何帮助不胜感激！

Answer 1

这可能不完全是你所追求的，但你可以通过调整梯度百分比来实现你想要的。我为每个部分添加了不同的渐变，并将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>