好的,假设<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和body设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;

例如:

身体{ 背景:-webkit-gradient(线性,左上,左下,从(#fff),到(#cbccc8))固定; }

下面是我解决这个问题的方法……它将显示内容的整个长度的渐变,然后简单地退回到背景色(通常是渐变中的最后一种颜色)。

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标签。

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; }

应用下面的CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

编辑:添加边框:0;到每个注释的body声明(Martin)。

编辑:添加背景附件:固定;到每个注释的体声明(Johe Green)。