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

确定说<body>内的内容总计300px高。

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

然后，我最大化我的窗口（或使其高于300像素）渐变将正好300px高（内容的高度），只是重复填补窗口的其余部分。

我认为这不是一个错误，因为它在webkit和壁虎都是一样的。

但有没有办法让梯度拉伸填补窗口，而不是重复？

应用以下CSS： 

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

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

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

关于以前的答案，如果内容需要滚动，将html和body设置为height: 100%似乎不起作用。 添加fixed到背景似乎修复 – need for height: 100%;

例如： 

 body { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed; }

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

  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'); } 
 <body> <h1>Hello world!</h1> </body>

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

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

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

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

  1. 在这里创build一个渐变： http : //www.colorzilla.com/gradient-editor/
  2. 在HTML而不是BODY上设置渐变。
  3. 使用“background-attachment：fixed”修复HTML的背景
  4. closuresBODY的顶部和底部边距
  5. （可选）我通常创build一个<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在各种大小和滚动需求的页面上进行了testing。

我知道我迟到了，但这里有一个更加可靠的答案。

所有你需要做的是使用min-height: 100%; 而不是height: 100%; 并且渐变背景将扩展视口的整个高度而不重复，即使内容是可滚动的。

喜欢这个： 

 html { min-height: 100%; } body { background: linear-gradient(#ff7241, #ff4a1f); }

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

我无法在这里得到答案的工作。
我发现它更好地修复一个全尺寸的股利在体内，给它一个负Z指数，并附加梯度。 

 <style> .fixed-background { position:fixed; margin-left: auto; margin-right: auto; top: 0; width: 100%; height: 100%; z-index: -1000; background-position: top center; background-size: cover; background-repeat: no-repeat; } .blue-gradient-bg { background: #134659; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */ } body{ margin: 0; } </style> <body > <div class="fixed-background blue-gradient-bg"></div> </body>

这是一个完整的示例https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55 

 background: #13486d; /* for non-css3 browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d'); background-repeat:no-repeat;

这就是我所做的： 

 html, body { height:100%; background: #014298 ; } body { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298)); background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%); background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%); /*I added these codes*/ margin:0; float:left; position:relative; width:100%; }

在我漂浮身体之前，上面有一个空白，并且显示了html的背景颜色。 如果我删除HTML的bgcolor，当我向下滚动时，渐变被切割。 所以我漂浮身体，并设置相对位置和宽度为100％。 它在Safari浏览器，铬，火狐，歌剧，互联网爆炸..哦等等。 ：P

你们有什么感想？

我已经使用这个CSS代码，它为我工作： 

 html { height: 100%; } body { background: #f6cb4a; /* Old browsers */ background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */ background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */ height: 100%; background-repeat: no-repeat; background-attachment: fixed; width: 100%; background-position: 0px 0px; }

相关信息是，您可以在http://www.colorzilla.com/gradient-editor/上创build您自己的伟大渐变;

/斯登

而不是100％，我只是添加了一些像素，现在得到了这一点，它适用于整个页面没有差距： 

 html { height: 1420px; } body { height: 1400px; margin: 0; background-repeat: no-repeat; }
Interesting Posts

如何使透明渐变？

Internet Explorer 9中的渐变

多梯度形状

JTable如何更改BackGround颜色

Android：使用线性渐变作为背景看起来是绑定的

Internet Explorer中的渐变颜色

你可以添加噪声CSS3渐变？

具有渐变的CSS3animation

如何在android中制作渐变背景

使用渐变背景的CSS3转换