好的，说里面的内容<body>总计高300像素。
如果我设置<body>使用-webkit-gradient或的背景-moz-linear-gradient
然后，我最大化窗口（或使其高度大于300px），渐变将恰好是300px（内容的高度），然后重复以填充窗口的其余部分。
我假设这不是错误，因为在webkit和gecko中都是相同的。
但是，是否有一种方法可以使渐变拉伸以填充窗口而不是重复？
在主体上设置的CSS3渐变背景不会拉伸，而是会重复吗？
第2274篇《在主体上设置的CSS3渐变背景不会拉伸，而是会重复吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共8个回答
这是我所做的：
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
你们有什么感想？
我在这里无法获得答案才能上班。
我发现将全尺寸div固定在主体中，将其赋予负z-index并将渐变附加到它的效果更好。
<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
脏; 也许您可以添加一个最小高度：100％；到html和body标签？或至少设置默认的背景颜色，即末端渐变颜色。
设置html { height: 100%}可能会对IE造成严重破坏。这是一个示例（png）。但是你知道什么有效吗？只需在<html>标签上设置背景即可。
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
背景延伸到底部，并且不会发生奇怪的滚动行为。您可以跳过所有其他修复程序。这得到了广泛的支持。我还没有找到一种浏览器，它不允许您将背景应用于html标签。这是完全有效的CSS，已经存在了一段时间。:)
我知道我参加晚会很晚，但这是一个更可靠的答案。
您需要做的就是使用min-height: 100%;而不是，height: 100%;并且渐变背景将扩展视口的整个高度而无需重复，即使内容是可滚动的。
像这样：
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}
关于先前的答案，如果内容需要滚动，则设置html和body为height: 100%似乎无效。添加fixed到背景似乎可以解决此问题-否need for height: 100%;
例如：
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}应用以下CSS：
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
编辑：添加margin: 0;到每个声明的正文声明（Martin）。
编辑：添加background-attachment: fixed;到每个声明的正文声明中（Johe Green）。
相似问题
问题类别
而不是100％，我只是添加了一些pixxel，现在它可以在整个页面中正常工作：