html - 当文档高度大于窗口高度时，背景渐变会重复出现

Question

我希望在我的网页上有一个背景渐变。当文档高度小于窗口高度时，我可以在整个页面上看到一个渐变。但是，当文档高度大于窗口高度时，当我开始向下滚动时，渐变开始重复自身。我想知道是否有办法摆脱这个问题并在整个页面上有一个恒定的不重复渐变。

需要明确的是，窗口高度是浏览器窗口的实际高度，文档高度是具有所有样式的网页的实际高度。看下面的代码:

html
{
  height: 100%;
  width: 100%;
  margin: 0% 0%;
  padding: 0% 0%;
  border: 0px;

  /* Background size */
  -webkit-background-size: cover;
  -moz-background-size: 100% auto;
  -o-background-size: cover;
  background-size: 100% auto;

  /* Background color */
  background: -webkit-linear-gradient(#FFEE00, #FFD300);
  background: -o-linear-gradient(#FFEE00, #FFD300);
  background: -moz-linear-gradient(#FFEE00, #FFD300);
  background: linear-gradient(#FFEE00, #FFD300);
  background-color: #FFEE00;
}


body
{
  width: 100%;
  height: 100%;
  margin: 0% auto;
  padding: 0% 0%;

  display: inline-block;
  clear: both;

  font-family: "Gill Sans", sans-serif;
  color: #000000;
  text-align: center;
}

我读到一个建议删除 height: 100%; 的答案来自 html 的行和body类，但是当我这样做时，渐变只是在文档高度结束的地方终止。当文档高度小于窗口高度时，窗口的其余部分只有空白，这不是我要找的。

Answer 1

这对我有用，而且我已经看到它对其他人有用，所以尝试一下，但是你在哪里使用

background: -webkit-linear-gradient(#FFEE00, #FFD300);

在你的html中，在末尾添加“fixed”，所以它看起来像这样:

background: -webkit-linear-gradient(#FFEE00, #FFD300) fixed;

其余代码保持不变。希望这有帮助!

~卢克