我正在尝试为身体背景添加渐变,该渐变从白色开始,在页面底部以灰色结束.由于页面具有粘性页脚,当内容大于浏览器窗口时,主体不会随内容拉伸/展开.所以渐变在中间停止.有人可以帮忙吗?
HTML:
<html>
<body>
<div class="content"> </div>
<div class="footer"> </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
CSS:
html {
height:100%;
}
body {
height:100%;
background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
min-height: 100%;
}
.footer {
height: 55px;
}
Run Code Online (Sandbox Code Playgroud)
背景附件:固定;
将其添加到您的身体CSS.
在旁注中你可能已经知道了这一点但是:background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);将无法在IE上运行.此属性仅适用于基于Mozilla的浏览器.
跨浏览器CSS渐变... http://webdesignerwall.com/tutorials/cross-browser-css-gradient