Html 内嵌img标签背景隐藏所有其他内容_Html_Css_Background

Html 内嵌img标签背景隐藏所有其他内容

html css

Html 内嵌img标签背景隐藏所有其他内容,html,css,background,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; l

我跟随在线图坦卡蒙，使用内联图像标签获得全尺寸背景。除了其他元素都隐藏在它后面之外，它工作得很好。我确信这是基本的，但我无法理解

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


身体{
}
#背景{
最小高度：800px；
最小宽度：1024px；
/*设置比例缩放*/
宽度：100%；
身高：100%；
/*设置定位*/
位置：固定；
排名：0；
左：0；
}
一行
一行
一行

非常感谢您的帮助。

将

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

我相信您正在寻找的是

z-index

css属性

试一试

我不太清楚你所说的“内联”背景是什么意思，但我相信你知道当你把背景作为一个单独的div，而不是把它放在CSS*的“body”部分时你在做什么。尝试将此添加到您的#bg部分：

z-index: -100;

关于这个问题

*在我看来，这可能对你有用：

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

为此，您需要使用z-index

将您的#bg div的z索引设为-1以更正此问题：）

下面是一个JSFIDLE示例-

进一步阅读：

请参阅解决方案演示。

您可以将图像向上移动。。。那么你就不需要任何额外的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元素的背景，也会起作用。

该死！我在考虑z指数，但没有意识到可以使用负数。谢谢，但是我需要一个最小的尺寸，如果需要的话还需要伸展——哦，还有IE8

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

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

<img id="bg" src="images/flowers.jpg" alt="flowers" />

<div>
<p>A line</p>
<p>A line</p>
<p>A line</p>
</div>