渐变背景的协助

Question

我正在尝试为网页创建一个背景，利用CSS3中的渐变选项。我希望它使用填充整个屏幕高度的渐变，当屏幕滚动超过该高度时，只使用最终颜色。

不幸的是，我所有的尝试都导致渐变重复或保持固定。这些都不符合我的意图。

有谁能帮我吗？到目前为止，我最接近的可能在下面找到，但显然它会保持固定。我尝试的其他一切基本上都存在重复问题，即使加入no-repeat也无济于事。

html {
    height: 100%
}

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

- Funkenstein

Answer 1

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

通过不重复渐变（使用no-repeat），我们可以将渐变限制为仅出现在屏幕的高度上，而纯色背景默认情况下会覆盖整个屏幕。

MDN关于多重背景堆叠的解释如下：^link 这些背景彼此层叠，第一个提供的背景位于顶部，最后一个列出的背景位于底部。只有最后一个背景可以包含背景颜色。^{(强调是我的)}

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中添加了红色的结束颜色，只是为了展示实色从渐变结束点接管的过程。

- Harry

Answer 2

实际上，它会像这样：

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

这里有一个 JSFiddle https://jsfiddle.net/v14m59pq/163/

- Blake

---

哎呀，Harry的答案是正确的。我没看到他的注释。 - Blake

抱歉 @Harry，我没有看到你的 注释。 - Blake

Answer 3

希望这能对你有所帮助。

如果你想要那种效果，你需要两个图层，底层是最终颜色，顶层是渐变。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: gold;
}

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

我使用黄金色的HTML和渐变的body，简单来说，父元素是主要颜色，子元素是全视口高度的渐变。

点击链接查看结果 :) http://codepen.io/TibicenasDesign/pen/VLywpL

- Héctor León