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），我们可以将渐变限制为仅存在于屏幕的高度，而纯色背景默认会贯穿整个尺寸。

以下是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添加了一个红色结束颜色，只是为了显示纯色从渐变结束的点开始接管。

Answer 2

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

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

这是一个小提琴https://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和带渐变的主体，只是意味着，父级是主色，子级是带有完整视口高度的渐变。

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

协助渐变背景

3 个答案: