好的，假设<body>内的内容的总高为300px。
如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景
然后我最大化我的窗口(或者只是让它高于300px)，梯度将恰好是300px高(内容的高度)，然后重复填充窗口的其余部分。
我假设这不是一个bug，因为它在webkit和gecko中都是一样的。
但是有没有办法让渐变拉伸来填充窗口而不是重复?
当前回答
加一个空格，加上“固定”这个词就足够了。不需要设定高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
其他回答
肮脏的;也许你可以添加一个min-height: 100%;到html，和主体标签?或者至少设置一个默认的背景色，它也是渐变结束的颜色。
我在这里很难找到答案。 我发现在主体中固定一个全尺寸的div，给它一个负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
加一个空格，加上“固定”这个词就足够了。不需要设定高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
这就是我所做的:
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, chrome, firefox, opera, Internet expl..哦,等一下。: P
你们怎么看?
这个页面上有很多不完整的信息，但不是完整的。我是这样做的:
在这里创建渐变:http://www.colorzilla.com/gradient-editor/ 在HTML上设置渐变而不是BODY。 用"background-attachment: fixed;"修复HTML的背景 关闭主体的顶部和底部边距 (可选)我通常创建一个<DIV id='容器'>，我把我所有的内容
这里有一个例子:
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中测试过了，测试了不同大小和滚动需求的页面。
