好的，假设<body>内的内容的总高为300px。
如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景
然后我最大化我的窗口(或者只是让它高于300px)，梯度将恰好是300px高(内容的高度)，然后重复填充窗口的其余部分。
我假设这不是一个bug，因为它在webkit和gecko中都是一样的。
但是有没有办法让渐变拉伸来填充窗口而不是重复?
应用下面的CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
编辑:添加边框:0;到每个注释的body声明(Martin)。
编辑:添加背景附件:固定;到每个注释的体声明(Johe Green)。
下面是我解决这个问题的方法……它将显示内容的整个长度的渐变，然后简单地退回到背景色(通常是渐变中的最后一种颜色)。
html { 背景:# cbccc8; ｝ 身体{ 平铺方式:不再重演; 背景:# cbccc8; 背景:-webkit-gradient(线性，左上，左下，从(#fff)，到(#cbccc8)); 背景:-moz-linear-gradient(top， #fff， #cbccc8); filter: progid: DXImageTransform.Microsoft。梯度(startColorstr = # ffffff, endColorstr = ' # cbccc8 '); ｝ <身体> <标题> Hello world !< / h1 > < /身体>
我已经在FireFox 3.6, Safari 4和Chrome中进行了测试，我将背景颜色保留在任何浏览器的主体中，因为某些原因不支持样式化HTML标签。
关于之前的回答，如果内容需要滚动，将html和body设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;
例如:
身体{ 背景:-webkit-gradient(线性，左上，左下，从(#fff)，到(#cbccc8))固定; ｝
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;
而不是100%，我只是添加了一些像素，现在得到了这个，它适用于整个页面，没有间隙:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
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
你们怎么看?
我已经使用了这个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/上创建自己的伟大的渐变
/斯滕
设置html {height: 100%}会对IE造成严重破坏。这里有一个例子(png)。但你知道什么最有效吗?只要在<html>标签上设置你的背景。
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
背景延伸到底部，没有奇怪的滚动行为发生。您可以跳过所有其他修复。这得到了广泛的支持。我还没有发现一个浏览器不让你应用背景的html标签。它是完全有效的CSS，而且已经有一段时间了。：）
这个页面上有很多不完整的信息，但不是完整的。我是这样做的:
在这里创建渐变: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中测试过了，测试了不同大小和滚动需求的页面。
我在这里很难找到答案。 我发现在主体中固定一个全尺寸的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
我知道我来晚了，但这里有一个更可靠的答案。
你所需要做的就是使用min-height: 100%;而不是身高:100%;你的渐变背景会扩展内容的整个高度而不会重复，即使内容是可滚动的。
是这样的:
html {
min-height: 100%;
}
body {
background: linear-gradient(#b5e48c, #457b9d);
}
不过，还有第二种解决方案。
正如其他人所说，在背景声明中添加固定值，将使渐变扩展视口的全部高度。
是这样的:
body {
background: linear-gradient(#b5e48c, #457b9d) fixed;
}
当然，你仍然需要声明min-height: 100%;在html中。
下面是CodePen中的一个演示，您可以使用这两种解决方案:https://codepen.io/ricardozea/pen/abwGBmz?editors=1100
加一个空格，加上“固定”这个词就足够了。不需要设定高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
推荐文章
- CSS:控制项目符号和<li>之间的空格
- 调试打印样式表的建议?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
