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

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

<repository>
 <id>jitpack.io</id>
 <url>https://jitpack.io</url>
</repository>

<dependency>
 <groupId>com.github.npanigrahy</groupId>
 <artifactId>Custom-Calendar-View</artifactId>
 <version>v1.0</version>
</dependency>

在你的HTML中

，添加“fixed”到最后，所以它看起来像这样：

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

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

〜卢克

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>

当文档高度超过窗口高度

2 个答案: