Html 将背景图像保持在底部_Html_Css

Html 将背景图像保持在底部

html css

Html 将背景图像保持在底部,html,css,Html,Css,我一直在研究一种将图像保留在页面底部的解决方案。我目前得到的代码是： .footer { background-image: url('images/footer.png'); background-repeat: repeat-x; position: absolute; height: 950px; width: 100%; z-index: -101; bottom: 0; } 然而，这也有一些问题。我的目标是一个背景，粘在底部，并

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

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

然而，这也有一些问题。我的目标是一个背景，粘在底部，并显示在所有其他东西后面（因此z指数低）。我在顶部有以下代码（中间有一个，只是块颜色，刚刚添加到主体）：

请注意：第一部分不起作用（不在底部），但第二部分起作用（在顶部）。
如果您希望访问该网站，请随时访问：www.duffydesigns.co.uk/brough（请不要做出判断，这是一项正在进行的工作，没有什么是真正完成的！）。
谢谢你的帮助，
约瑟夫·达菲

注意：我相信你能猜出，顶部是天空，底部是草地和树木。

添加

最小高度：100%

而不是

高度：950px

，这将为你的div提供必要的高度。其次，使用

position:fixed

将背景图像锁定在同一位置（用于滚动）。

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

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

background position

接受两个参数，一个x值和一个y值，因此要将其定位在底部，可以使用：

background position:center-bottom。您可以使用这个来修复第一个示例
是否有任何原因使您不能将背景作为正文
或html
标记的背景？我认为官方不允许在html
标记后面使用它，但我从未见过一个浏览器在它不工作的情况下（至少还没有…。
这样做
<div class="background"></div>

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

}


.背景{
宽度：100%；
高度：90px；
背景：透明url（…）repeat-x0；
位置：固定；
底部：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>


html，正文{
身高：100%；
保证金：0；
}
#内容{
最小高度：100%；
位置：相对位置；
}
#页脚{
背景：绿色；
宽度：100%；
高度：150像素；
利润上限：-150px；
显示：块；
}
.测试{
背景：蓝色；
宽度：400px；
高度：2000px；
不透明度：.7；
颜色：#fff；
填充：20px；
}
这是一页。
这表明事情出现在背景面前
对不起，我这方面不清楚。我希望图像显示在页面底部，而不是视口，以及页面顶部，而不是视口。不过，谢谢你的帮助。我忘了简单地将它添加到主体中
也可以让主体的其余部分充满颜色。谢谢！：）不客气！顺便说一下，您将问题标记为css3
，并且css3允许多个背景。以防万一。
<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>