当文档高度超过 window 高度时背景渐变重复

Question

我希望在我的网页上有一个背景渐变。当文档高度小于 window 高度时，我可以在整个页面上看到一个单一的渐变。但是，当文档高度大于 window 高度时，当我开始向下滚动时，渐变开始重复。我想知道是否有办法摆脱这种情况，并在整个页面中保持恒定的非重复渐变。

需要说明的是，window高度是浏览器的实际高度window，文档高度是所有样式的网页实际高度。看下面的代码：

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;
}

我读到一个建议删除 html 和 body 类中的 height: 100%; 行的答案，但是当我这样做时，渐变只是在文档高度结束。当文档高度小于window高度时，window的剩余部分只有白色space，这不是我要找的

Answer 1

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

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

在您的 html 中，将 "fixed" 添加到末尾，因此它看起来像这样：

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

其余代码保持不变。希望这对您有所帮助！

~卢克

Answer 2

已修复 background-attachment: fixed;

ps：删除了不必要的属性，例如默认的 color:#000000。

html {
  width: 100%;
  height: 100%;
}


body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Gill Sans", sans-serif;
  text-align: center;
  background: -webkit-linear-gradient(#FFEE00, #FFD300);
  background: -o-linear-gradient(#FFEE00, #FFD300);
  background: -moz-linear-gradient(#FFEE00, #FFD300);
  background: linear-gradient(#FFEE00, #FFD300);  
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-attachment: fixed;  
}

<p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p>

当文档高度超过 window 高度时背景渐变重复

Background gradient repeating itself when document height is more than window height

html

css

background

linear-gradients