Question

我一直在使用一种解决方案，将图像保存在底页。我目前得到的代码是：

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
    width: 100%;
    z-index: -101;
    bottom: 0;
}

然而，这有问题。我的目标是坚持底部并显示在其他所有背后的背景（因此低z-index）。我有顶部的下面的代码（有一个中间，这只是块颜色，只是添加到正文）：

.background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600px;
    background-image: url('images/sky.png');
    background-position: center;
    background-repeat: repeat-x;
    z-index: -100;
}

请注意：第一部分不起作用（它不在底部），但第二部分不起作用（它位于顶部）。
如果您想访问该网站，请随时访问：www.duffydesigns.co.uk/brough（请不要通过判断，这是一项正在进行中的工作，没有任何内容真正完成！）。
谢谢你的帮助，
约瑟夫达菲注意：我相信你可以弄明白，顶部是天空，底部是草和树木。

Answer 1

background-position有两个参数，一个x值和一个y值，所以要将它放在底部，你可以使用：background-position: center bottom;。您可以使用它来修复您的第一个示例。

是否有任何理由不能将背景作为body或html标记的背景？我不认为它正式被允许在html标签后面，但是我从未见过它不起作用的浏览器（不管怎样......）。

Answer 2

如果您希望背景图片显示在页面底部，您可以使用：

body {
    background-image: url(...);
    background-position: center bottom;
    background-repeat: no-repeat;
}

Answer 3

这样做

<div class="background"></div>

.background {
    width:100%;
    height:90px;
    background:transparent url(...) repeat-x 0 0;
    position:fixed;
    bottom:0;

}

检查http://jsfiddle.net/YGXxT/

处的工作示例

Answer 4

如果您希望它始终显示在最底部（页面而不是窗口），请使用类似的内容，将其粘贴到html文件中以查看它的工作情况，将.test的高度更改为显示当窗口没有滚动时它会停留在屏幕底部，但是当窗口没有滚动时会停留在屏幕底部。

<html>
<head>
<style type="text/css">
    html, body{
        height:100%;
        margin:0;
        }
    #content{
        min-height:100%;
        position:relative;
        }
    #footer{
        background:green;
        width:100%;
        height:150px;
        margin-top:-150px;
        display:block;
        }
    .test{
        background:blue; 
        width:400px; 
        height:2000px; 
        opacity:.7; 
        color:#fff; 
        padding:20px;
        }
</style>
</head>
<body>
<div id="content">
    <h1>This is a page.</h1>
    <div class="test">this shows that things appear in front of the bg</div>
</div>
<div id="footer"></div>
</body>
</html>

Answer 5

添加min-height: 100%代替height: 950px，这将为您的div提供必要的高度。其次，使用position:fixed将背景图像锁定在同一位置（用于滚动）。

将背景图像保持在底部

5 个答案:

检查http://jsfiddle.net/YGXxT/