Question

我有以下代码，它可以很好地创建背景和标题，但它不会按预期放入页脚。我该如何解决这个问题？

<style>
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(filler.png), url(footer.png);
    background-position: center top, center center, center bottom;
    background-repeat: no-repeat, repeat-y, no-repeat;
}
</style>

以上是上述代码的结果：http://puu.sh/7jgq8.jpg
标题和背景填充按预期运行，但没有页脚。

Answer 1

重新排列元素，并结合loop_duplicate的建议。

您已指定banner，filler，footer。因此footer由filler覆盖。切换到banner，footer，filler，您就可以看到页脚。

<style>
html, body {
    min-height: 100%
}
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(footer.png), url(filler.png);
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}
</style>

Answer 2

确保<body>元素已扩展到页面底部：

html, body {
   min-height: 100%
}

Answer 3

background-position: center top, center center, center bottom;

中心底部使您的图像占据窗口底部而不是文档

我认为您正在寻找类似Sticky footer或bootstrap sticky footer

的内容

CSS页脚图像

3 个答案: