在身体上设置的CSS3渐变背景不会拉伸，而是重复？

好吧说<body>里面的内容总计300px高。

如果我使用-webkit-gradient或-moz-linear-gradient设置我的<body>的背景

然后我最大化我的窗口（或者只是让它高于300px）渐变将正好是300px高（内容的高度），并重复填充窗口的其余部分。

我假设这不是一个bug，因为它在webkit和gecko中是相同的。

但有没有办法让渐变拉伸填充窗口而不是重复？

#1楼

设置html { height: 100%}会对IE造成严重破坏。这是一个例子（png）。但是你知道什么效果很好吗？只需在<html>标签上设置背景即可。

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

背景延伸到底部，并且不会发生奇怪的滚动行为。您可以跳过所有其他修复程序。这得到了广泛的支持。我没有找到一个不允许你将背景应用于html标签的浏览器。它是完全有效的CSS并且已经有一段时间了。 :)

#2楼

此页面上有很多部分信息，但不完整。这是我做的：

在这里创建一个渐变： http ： //www.colorzilla.com/gradient-editor/
在HTML而不是BODY上设置渐变。
使用“background-attachment：fixed;”修复HTML背景
关闭BODY上的上边距和下边距
（可选）我通常会创建一个<DIV id='container'> ，我将所有内容都放入其中

这是一个例子：

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

这已经在各种尺寸和滚动需求的页面上使用IE，Chrome和Firefox进行了测试。

#3楼

脏; 也许你可以加一个最小高度：100％; 到HTML和身体标签？那或者至少设置一个默认的背景颜色，也就是结束渐变颜色。

#4楼

应用以下CSS：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

编辑：增加margin: 0; 每条评论的身体声明（马丁）。

编辑：添加background-attachment: fixed; 每条评论的身体声明（ Johe Green ）。

#5楼

这就是我为解决这个问题所做的工作......它将显示内容全长的渐变，然后简单地回退到背景颜色（通常是渐变中的最后一种颜色）。

 html { background: #cbccc8; } body { background-repeat: no-repeat; background: #cbccc8; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)); background: -moz-linear-gradient(top, #fff, #cbccc8); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); }