css - 协助渐变背景

Question

我正在尝试为利用 CSS3 中的渐变选项的网页创建背景。我想要它做的是使用填充屏幕整个高度的渐变，然后如果屏幕滚动超过该高度，则只使用最终颜色。

不幸的是，我所有的尝试都以渐变重复或保持固定而告终。对于我的想法，这些都 Not Acceptable 。

你们能帮帮我吗？到目前为止我能得到的最接近的可以在下面找到，但显然它保持固定。我尝试过的所有其他方法几乎都有一个重复的问题，即使在混合中没有重复。

html {
    height: 100%
}

body {
    background: gold no-repeat linear-gradient(silver, orange, gold);
    background-attachment: fixed;
    min-height: 100%;
    margin: 0px;
}

Answer 1

您可以使用多个 background 并像下面的代码片段一样堆叠它们，其中第一个背景是您的 linear-gradient，第二个是纯色(与线性渐变的结束颜色相同)。

通过不重复渐变(使用 no-repeat)，我们可以将渐变限制为仅在屏幕高度出现，而纯色背景默认情况下会贯穿整个尺寸。

Here is what MDN says about multiple background stacking: ^link

These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

^{(重点是我的)}

html {
  height: 100%;
}
body {
  background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
  margin: 0px;
}


/* Just for demo */

div {
  min-height: 200vh;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div>
  Some content....
</div>

注意:我在 linear-gradient 中添加了红色端点颜色，只是为了展示纯色如何从渐变结束点接管。