好的,假设<body>内的内容的总高为300px。
如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景
然后我最大化我的窗口(或者只是让它高于300px),梯度将恰好是300px高(内容的高度),然后重复填充窗口的其余部分。
我假设这不是一个bug,因为它在webkit和gecko中都是一样的。
但是有没有办法让渐变拉伸来填充窗口而不是重复?
好的,假设<body>内的内容的总高为300px。
如果我使用-webkit-gradient或- mz -linear-gradient设置<body>的背景
然后我最大化我的窗口(或者只是让它高于300px),梯度将恰好是300px高(内容的高度),然后重复填充窗口的其余部分。
我假设这不是一个bug,因为它在webkit和gecko中都是一样的。
但是有没有办法让渐变拉伸来填充窗口而不是重复?
当前回答
下面是我解决这个问题的方法……它将显示内容的整个长度的渐变,然后简单地退回到背景色(通常是渐变中的最后一种颜色)。
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标签。
其他回答
而不是100%,我只是添加了一些像素,现在得到了这个,它适用于整个页面,没有间隙:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
设置html {height: 100%}会对IE造成严重破坏。这里有一个例子(png)。但你知道什么最有效吗?只要在<html>标签上设置你的背景。
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
背景延伸到底部,没有奇怪的滚动行为发生。您可以跳过所有其他修复。这得到了广泛的支持。我还没有发现一个浏览器不让你应用背景的html标签。它是完全有效的CSS,而且已经有一段时间了。:)
我已经使用了这个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和body设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;
例如:
身体{ 背景:-webkit-gradient(线性,左上,左下,从(#fff),到(#cbccc8))固定; }
这就是我所做的:
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
你们怎么看?