内联img标签背景隐藏其他一切

时间:2012-05-24 07:40:09

标签: html css background

我使用在线图片来跟踪在线图片以获得全尺寸背景。除了隐藏在其后面的所有其他元素之外,它的效果很好。 我确信这是基本的,但我无法理解它。

<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>

任何帮助都非常感激。

6 个答案:

答案 0 :(得分:0)

设置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;
}

答案 1 :(得分:0)

我相信你要找的是z-index css属性。

尝试

#bg {
    z-index: -1000;
}

答案 2 :(得分:0)

我不太确定你的“内联”背景是什么意思但我确定你知道当你把背景作为一个单独的div而不是把它放在CSS的“body”部分时你正在做什么*。尝试将此添加到#bg部分:

z-index: -100;

关于z-index

*在我看来,这对你有用:

body {
background: url('background.jpg') no-repeat fixed center; 
}

答案 3 :(得分:0)

您需要使用 z-index

将#bg div的z-index设为-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;
}

这是一个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/

答案 4 :(得分:0)

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;
}

请参阅解决方案演示here on jsfiddle

答案 5 :(得分:0)

您可以将图像向上移动......然后您不需要任何额外的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元素的背景也是有效的。