内容后面的半粘性页脚

Question

我正在尝试从 360 像素高度的图像创建一个粘性页脚，但我喜欢 160 像素的图像位于内容后面，而 200 像素则保持粘性。 我的 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

您可以将 页脚位置更改为相对，而不是使用底部属性，将 顶部属性设置为 -250px 或任何您想要的。将 z-index 属性设置为 -1 以使其隐藏。

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

编辑： 为了避免页脚显示在窗口中间，一个更好的解决方案是将背景图像应用到正文并使用background-position:bottom left 属性对其进行调整。现在你可以给footer 设置你想要的高度以适合你想要的背景图像：http://jsfiddle.net/YQMyc/4/