应用以下 CSS：
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
编辑：在每个评论的正文声明中添加了 margin: 0; (Martin)。
编辑：在每个评论的正文声明中添加了 background-attachment: fixed; (Johe Green)。
关于先前的答案，如果内容需要滚动，将 html 和 body 设置为 height: 100% 似乎不起作用。将 fixed 添加到背景似乎可以解决这个问题 - 没有 need for height: 100%;
例如：
身体{背景：-webkit-gradient（线性，左上，左下，从（#fff），到（#cbccc8））固定； }
background-attachment: fixed
min-height:100%（在兼容的浏览器中）
我知道我迟到了，但这里有一个更可靠的答案。
您需要做的就是使用 min-height: 100%; 而不是 height: 100%;，您的渐变背景将扩展 content 的整个高度而不会重复，即使内容是可滚动的。
像这样：
html {
min-height: 100%;
}
body {
background: linear-gradient(#b5e48c, #457b9d);
}
不过还有第二种解决方案。
正如其他人所说，将值 fixed 添加到 background 声明将使渐变扩展 viewport 的整个高度。
像这样：
body {
background: linear-gradient(#b5e48c, #457b9d) fixed;
}
当然，您仍然需要在 html 中声明 min-height: 100%;。
这是 CodePen 中的演示，您可以在其中使用两种解决方案：https://codepen.io/ricardozea/pen/abwGBmz?editors=1100
这是我为解决这个问题所做的……它将显示整个内容长度的渐变，然后简单地回退到背景颜色（通常是渐变中的最后一种颜色）。
html { 背景：#cbccc8; } 身体 { 背景重复：不重复；背景：#cbccc8；背景：-webkit-gradient（线性，左上，左下，从（#fff），到（#cbccc8））；背景：-moz-linear-gradient（顶部，#fff，#cbccc8）；过滤器: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); }
世界你好！
我已经在 FireFox 3.6、Safari 4 和 Chrome 中对此进行了测试，对于由于某种原因不支持样式化 HTML 标签的任何浏览器，我将背景颜色保留在正文中。
设置 html { height: 100%} 会对 IE 造成严重破坏。 Here's an example (png). 但您知道什么最有效吗？只需在 <html> 标记上设置您的背景。
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
背景延伸到底部，不会发生奇怪的滚动行为。您可以跳过所有其他修复。这得到了广泛的支持。我还没有找到不允许您将背景应用于 html 标记的浏览器。它是完全有效的 CSS 并且已经存在了一段时间。 :)
html 添加渐变，但在我的情况下它会在页面的中途停止。添加 background-attachment:fixed 确实解决了这个问题。我在不止一个网站上看到过这种情况，但一直找不到原因。
html, body { height: 100%; }。
此页面上有很多部分信息，但不是完整的。这是我所做的：
在此处创建渐变：http://www.colorzilla.com/gradient-editor/ 在 HTML 而不是 BODY 上设置渐变。使用“background-attachment:fixed;”修复 HTML 的背景关闭 BODY 的顶部和底部边距（可选） 我通常会创建一个
这是一个例子：
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 上针对各种大小和滚动需求的页面进行了测试。
添加一个空格和固定到末尾的单词就足够了。无需设置高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
fixed 之间的“空格”在 background 速记语法中是必需的。所以“空格”不是解决方案，而是符号 fixed。这是一个不同的解决方案，因为与上面我的不同，渐变背景扩展了 viewport 的高度，而我的扩展了 content 的高度。我认为这也是一个很好的解决方案。
fixed 之间的空格不是必需的。
肮脏的;也许你可以添加一个 min-height: 100%;到 html 和 body 标签？那或者至少设置一个默认的背景颜色，它也是结束渐变颜色。
我很难在这里找到答案。我发现在 body 中修复一个全尺寸的 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
我已经使用了这个 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/ 创建自己的出色渐变
/斯坦
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、chrome、firefox、opera、internet expl.. 哦等等。 :P
你们有什么感想？
而不是 100% 我只是添加了一些像素现在得到了它，它适用于整个页面而没有间隙：
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
body上添加margin:0;，否则我的页面底部会出现空白。background-repeat和background-attachment出现在您的background规则之后。否则，背景可能仍会重复。