内容背后的半粘性页脚

Question

我正在尝试从360px高度的图像创建粘性页脚，但我喜欢160px的图像位于内容后面，200px保持粘性。 我的css是：

html {
 position: relative;
 min-height: 100%;
}

body {
 margin: 0 0 360px;
 background: #049ec4
}

#wrap {
 width: 90%;
 border-radius: 8px;
 background: #809FFF
}

footer {
 position: absolute;
 left: 0;
 bottom: 0;
 height: 360px;
 width: 100%;
 background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x;
}

http://jsfiddle.net/RC3Za

但正在创建一个不需要的空间，我喜欢css输出如下：

Answer 1

您可以将页脚位置更改为相对，而不是使用bottom属性，将 top属性设置为-250px 或您想要的任何内容。将 z-index属性设置为-1 以将其置于包装后面。

看看这里：http://jsbin.com/picazedu/1/edit

修改 为避免页脚显示在窗口中间，更好的解决方案是将背景图像应用于正文并使用background-position:bottom left属性进行调整。现在，您可以根据需要为footer提供想要适合背景图像的高度：http://jsfiddle.net/YQMyc/4/