Question

我正在尝试为身体背景添加渐变，该渐变从白色开始，在页面底部以灰色结束。由于页面具有粘性页脚，当内容大于浏览器窗口时，主体不会随内容拉伸/展开。所以渐变在中间停止。有人可以帮忙吗？

HTML：

<html>
    <body>
        <div class="content"> </div>
        <div class="footer"> </div>
    </body>
</html>

CSS：

html {
    height:100%;
}
body { 
    height:100%;
    background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
    min-height: 100%;
}    
.footer {
    height: 55px;
}

Answer 1

背景附件：固定的;

将此添加到您的身体CSS。

在旁注上你可能已经知道了，但是：background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);不能在IE上工作。此属性仅适用于基于Mozilla的浏览器。

跨浏览器CSS渐变...... http://webdesignerwall.com/tutorials/cross-browser-css-gradient

Answer 2

您只需将htmland body CSS设置为auto并从body背景渐变中移除大小 - 请参阅：http://jsfiddle.net/ZqkY7/

与粘性页脚的梯度背景

2 个答案: