Css 梯度背景辅助

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

不幸的是，我所有的尝试最终要么重复梯度，要么保持不变。就我的想法而言，这两个都是不可接受的

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

html {
    height: 100%
}

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

---

您可以使用多个

background

s，并像下面的代码片段那样堆叠它们，其中第一个背景是您的

linear gradient

，第二个是纯色（与linear gradient的结束色相同）

通过不重复渐变（使用

no repeat

），我们可以将渐变限制为仅显示屏幕高度，而默认情况下纯色背景将贯穿整个屏幕

以下是MDN对多背景叠加的看法：

它们彼此层叠，顶部是您提供的第一个背景，后面是最后一个背景。只有最后一个背景可以包含背景色

（重点是我的）

html{
身高：100%；
}
身体{
背景：线性梯度（银、橙、金、红）无重复，金；
边际：0px；
}
/*只是为了演示*/
div{
最低高度：200vh；
}

一些内容。。。。

实际上，它看起来是这样的：

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

---

这是一把小提琴，希望它能帮助你

如果你想要这种效果，你需要两层，一层是最后的颜色，另一层是渐变色

* {
  margin: 0;
  padding: 0;
}

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

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

我使用带有金色的html和带有渐变的主体，简单地说，父对象是主颜色，子对象是带有完整视口高度的渐变

选中链接以查看结果：）

---

哎呀，哈利的回答是对的。我没有看到他的便条对不起，哈利，没有看到你的便条