我已经按照在线 tut 使用内联图像标签获得全尺寸背景。除了所有其他元素都隐藏在它后面之外，它运行良好。我确定这是基本的，但我无法理解它。
<style>
body {
}
#bg {
min-height: 800px;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<nav>
</nav>
<div>
<p>A line</p>
<p>A line</p>
<p>A line</p>
</div>
<img id="bg" src="images/flowers.jpg" alt="flowers" />
</body>
</html>
非常感谢任何帮助。
设置z-index to -1，
#bg {
min-height: 800px;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
我相信您正在寻找的是z-indexcss 属性。
尝试
#bg {
z-index: -1000;
}
我不太清楚你所说的“内联”背景是什么意思，但我确定你知道当你把背景作为一个单独的 div 而不是把它放在你的 CSS* 的“body”部分时你在做什么。尝试将此添加到您的#bg 部分：
z-index: -100;
关于z-index。
*在我看来，这对你有用：
body {
background: url('background.jpg') no-repeat fixed center;
}
为此，您将需要使用z-index。
给你的#bg div 一个 -1 的 z-index 来纠正这个问题:)
#bg {
min-height: 800px;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
这是一个 jsfiddle 示例 - http://jsfiddle.net/KN8na/
进一步阅读：
http://reference.sitepoint.com/css/z-index
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
您可以将图像向上移动...然后您不需要任何额外的CSS。
<img id="bg" src="images/flowers.jpg" alt="flowers" />
<div>
<p>A line</p>
<p>A line</p>
<p>A line</p>
</div>
但是任何其他解决方案，例如将z-index图像设置为负值，或将图像设置为主体元素的背景也可以。
body {
}
#bg {
z-index: -1000;
background: #ff0;
min-height: 800px;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
在 jsfiddle 上查看解决方案演示。