Html 将背景图像保留在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5383438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keeping background image at bottom
提问by Joseph Duffy
I've been working with a solution for keeping images at the bottom page. The code I've currently got is:
我一直在研究将图像保留在底部页面的解决方案。我目前得到的代码是：
.footer {
background-image: url('images/footer.png');
background-repeat: repeat-x;
position: absolute;
height: 950px;
width: 100%;
z-index: -101;
bottom: 0;
}
However, this has issues. What I'm aiming for is a background that sticks to the bottom and is displayed behind everything else (Hence the low z-index). I've got the following code for the top part (There's a middle, that's just block colour, and just added to the body):
然而，这有问题。我的目标是一个贴在底部并显示在其他所有东西后面的背景（因此低 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;
}
Please note: The first part doesn't work (It's not at the bottom), but the second part does (It's at the top).
If you wish to visit the site, feel free to: www.duffydesigns.co.uk/brough (Please don't pass judgment, it's a work in progress, nothing is truly finished!).
Thanks for the help,
Joseph Duffy
Note: As I'm sure you can figure out, the top part is the sky, the bottom is grass and trees.
请注意：第一部分不起作用（不在底部），但第二部分起作用（在顶部）。
如果您想访问该网站，请随时访问：www.duffydesigns.co.uk/brough（请不要判断，这是一项正在进行的工作，没有真正完成！）。
感谢您的帮助，
Joseph Duffy
注意：我相信您已经知道了，顶部是天空，底部是草和树木。
回答by jeroen
background-positiontakes two arguments, an x-value and an y-value so to position it at the bottom, you would use: background-position: center bottom;. You could use this to fix your first example.
background-position需要两个参数，一个 x 值和一个 y 值，因此要将其放置在底部，您可以使用：background-position: center bottom;。您可以使用它来修复您的第一个示例。
Is there any reason that you cannot put the background as the background of the bodyor the htmltag? I don′t think it is officially allowed behind the htmltag, but I have never seen a browser where it doesn′t work (not yet anyway...).
有什么理由不能把背景作为body或html标签的背景？我不认为它被正式允许在html标签后面，但我从未见过它不起作用的浏览器（无论如何还没有......）。
回答by ChrisJ
If you want a background image to appear at the bottom of the page, you may use:
如果您希望在页面底部显示背景图像，您可以使用：
body {
background-image: url(...);
background-position: center bottom;
background-repeat: no-repeat;
}
回答by Hussein
Do this
做这个
<div class="background"></div>
.background {
width:100%;
height:90px;
background:transparent url(...) repeat-x 0 0;
position:fixed;
bottom:0;
}
Check working example at http://jsfiddle.net/YGXxT/
在http://jsfiddle.net/YGXxT/检查工作示例
回答by Kevin D.
If you want it to appear at the very bottom at all times (of the page, not the window), use something like this, paste it into an html file to see it at work, change the height of .test to show that it'll stay at the screen bottom when the window doesnt scroll, but go further down when it does.
如果您希望它始终显示在最底部（页面的底部，而不是窗口），请使用类似的内容，将其粘贴到 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>
回答by rsplak
Add min-height: 100%instead of the height: 950px, that will give your div the height necessary. Second, use position:fixedto lock the background image at the same place (for scrolling).
添加min-height: 100%而不是height: 950px，这将为您的 div 提供必要的高度。其次，用于position:fixed将背景图像锁定在同一位置（用于滚动）。
