当文档高度大于窗口高度时，背景渐变会自行重复答案

【问题标题】：Background gradient repeating itself when document height is more than window height当文档高度大于窗口高度时，背景渐变会自行重复
【发布时间】：2016-03-28 21:48:29
【问题描述】：

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

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

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%; 行，但是当我这样做时，渐变只会在文档高度结束的地方终止。当文档高度小于窗口高度时，窗口的剩余部分只有空白，这不是我要找的。p>

【问题讨论】：

标签： html css background linear-gradients

【解决方案1】：

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

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

在您的 html 中，将“fixed”添加到末尾，如下所示：

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

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

~卢克

【讨论】：

【解决方案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;  
}

&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;&lt;p&gt;t&lt;/p&gt;

【讨论】：