好的，假设<body>内的内容的总高为300px。
如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景
然后我最大化我的窗口(或者只是让它高于300px)，梯度将恰好是300px高(内容的高度)，然后重复填充窗口的其余部分。
我假设这不是一个bug，因为它在webkit和gecko中都是一样的。
但是有没有办法让渐变拉伸来填充窗口而不是重复?
当前回答
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设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;
例如:
身体{ 背景:-webkit-gradient(线性，左上，左下，从(#fff)，到(#cbccc8))固定; ｝
肮脏的;也许你可以添加一个min-height: 100%;到html，和主体标签?或者至少设置一个默认的背景色，它也是渐变结束的颜色。
而不是100%，我只是添加了一些像素，现在得到了这个，它适用于整个页面，没有间隙:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
加一个空格，加上“固定”这个词就足够了。不需要设定高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
应用下面的CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
编辑:添加边框:0;到每个注释的body声明(Martin)。
编辑:添加背景附件:固定;到每个注释的体声明(Johe Green)。
