协助渐变背景

Question

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

不幸的是，我所有的尝试都以梯度重复或保持固定而告终。这些都不符合我的想法。

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

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

Answer 2

实际上，它看起来像这样：

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

这是一个fiddlehttps://jsfiddle.net/v14m59pq/163/

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 和带有渐变的主体，简单来说，父级是主色，子级是全视口高度的渐变。

检查 link 以查看结果:) http://codepen.io/TibicenasDesign/pen/VLywpL

协助渐变背景

Assistance with Gradient Background

css

gradient

linear-gradients