将背景图像保留在底部

问题描述 投票：0回答：5


我一直在研究将图像保留在底部页面的解决方案。我目前得到的代码是：

.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（请不要做出判断，这是一项正在进行的工作，一切都还没有真正完成！）。
感谢您的帮助，
约瑟夫·达菲
注意：我相信你能弄清楚，顶部是天空，底部是草地和树木。

html css
5个回答
21
投票

background-position
接受两个参数，一个 x 值和一个 y 值，因此要将其定位在底部，您可以使用：
background-position: center bottom;
。您可以使用它来修复您的第一个示例。

有什么原因不能将背景作为 

body
或 
html
标签的背景吗？我不认为它在 
html
标签后面是官方允许的，但我从未见过它无法工作的浏览器（无论如何还没有......）。

6
投票

如果您希望页面底部出现背景图片，您可以使用：

body {
    background-image: url(...);
    background-position: center bottom;
    background-repeat: no-repeat;
}
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/

0
投票

添加 

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

0
投票

如果您希望它始终显示在最底部（页面的底部，而不是窗口的底部），请使用类似的内容，将其粘贴到 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.