Html 如何将背景图片放在页面内容后面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26723291/
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
How to place background image behind page content?
提问by user46688
I've got a background image on my webpage. Now I want to add content that floats over it. The code below places the content behind the image. How to correct it?
我的网页上有一张背景图片。现在我想添加漂浮在它上面的内容。下面的代码将内容放在图像后面。如何纠正？
Note that I've borrowed (and I'm trying to get the effect) discussed in this link for background image: CSS-Only Technique #2from: http://css-tricks.com/perfect-full-page-background-image/
请注意，我已经借用（并且我正在尝试获得效果）在此链接中讨论的背景图像： CSS-Only Technique #2来自：http: //css-tricks.com/perfect-full-page-background-image/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
-->
</style>
</head>
<body>
<div id="bg">
<img src="myimage.jpg">
</div>
<div id="mycontent">
...
</div>
</body>
</html>
回答by jleggio
Simply set your z-indexto a negative value
只需将您z-index的值设置为负值
#bg{
z-index:-1;
}
回答by Throne Creative
This has been my goto solution for easy BG images. You wont need to add the image the the HTML markup - just reference in the css file. This will also perfectly scale the image for you.
这是我的简单 BG 图像的 goto 解决方案。您不需要将图像添加到 HTML 标记中 - 只需在 css 文件中引用即可。这也将为您完美地缩放图像。
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: http://css-tricks.com/perfect-full-page-background-image
来源：http: //css-tricks.com/perfect-full-page-background-image
