HTML5/CSS3 - div id无效

Question

HTML5/CSS3 - div id无效

htmlcss

4

我会尽力为您进行翻译，并使其更加易于理解。以下是需要翻译的内容：

我试图在我的网页正文中插入一张图片，使用一个带有背景图片的 div id。但是当我在谷歌浏览器中预览时，不明白为什么图片没有显示出来？

我在首页使用几乎相同的代码，那里一切都正常。

HTML：

<body>

<div id="body">

<div id="rainforestimage"></div>

</div>

</body>

CSS（层叠样式表）：

#body {
width:1024px;
height:auto;
background-image:url(../images/background2.png);
margin:0 auto;
background-repeat:no-repeat;
overflow:hidden;
}

#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
}

- QueenOfRome

摆脱div，只需将其设置为body标签。 - OllyBarca

尝试在您的#body中将overflow设置为auto。 - Caio Felipe Pereira

为什么在 #rainforestimage 中使用 position:absolute，这是必要的吗？ - G.L.P

只是因为你在 <div id="body"> 中没有给 #rainforestimage 设置 position:absolute;。 - Sachink

请查看这个fiddle链接：http://jsfiddle.net/sachinkk/jhwzfdLb/ - Sachink

5个回答

0

你为#body和#rainforestimage保持相同的宽度，对于#body，你设置了height:auto。如果在#body下只有一个#rainforestimage div，则理想情况下，body的宽度将与#rainforestimage div相同，因此您看不到背景图像。因此，如果您需要增加#body div的height并减小#rainforestimage div的width，以便您可以看到背景图像。

这肯定会起作用。如果您遇到任何层叠问题，请使用z-index，确保元素具有position属性。

- Jayababu

0

绝对定位的 div 理想情况下应该不占高度。您需要将高度设置为 100% 或 top:0 和 bottom:0。

尝试使用以下 CSS 代码。

#rainforestimage {
  background-image:url(../images/exhibits/rainforest.png);
  width:1024px;
  margin:0 auto;
  margin-top:74px;
  height:364px;
  position:absolute;
  z-index:1;
  box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
  height:100%;
  top:0;
  bottom:0;
}

- Nilesh Mahajan

0

你看不到它是因为高度没有设置。在CSS中添加

#body {
width:1024px;
height:200px;
}

https://jsfiddle.net/neerajsonar/72wr5n7u/

图片重叠了，您可以根据您的图片设置边距。

- neeraj.sonar

0

尝试为div #body添加min-height。实际上，#body不会有高度，因为您放置在其中的元素#rainforestimage被定位为绝对位置。

#body {
  min-height:364px;
}

- Usman Arshad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EaziLuizi · Accepted Answer

你的 div#body 需要设置高度，尝试设置高度，你就能看到背景图片了。

此外，你的 HTML 页面和文件夹 images 应该是同级目录下的兄弟关系。

编辑：

如果你仍然看不到 background2.png，那是因为 rainforest.png 覆盖在它上面，这是由于你设置的其他样式导致的。

position:absolute;
z-index:1;