html图像不显示

Question

我试图在盒子的背景上显示一些图像，但我的图像没有显示这是所选部分的 html 代码:

<a href="rot1">Vision</a>
<div style="display:none;">
<!--<div style="background-image: url(../img/slide1/background1.png); height: 200px; width: 400px; border: 1px solid black;"></div>-->
<div class="info_image">img/slide1/background1.png</div>
<div class="info_heading">Our Vision</div>
<div class="info_description">
    Create ICT as a driver to knowledge-based socioeconomic transformation initiatives.
<!--<a href="#" class="more">Read more</a>-->
</div>

这是我的CSS:

img.bg{
    position:absolute;
    top:0px;
    left:0px;
}

Answer 1

看起来这里有一些不正常的地方。您的 CSS 指向不存在的图像标签和类以及设置为 display:none; 的包含 (?) div。考虑以下内容

<a href="rot1">Vision</a>
<div class="info_image">
  <div class="info_heading">Our Vision</div>
  <div class="info_description">
    Create ICT as a driver to knowledge-based socioeconomic transformation initiatives.
  <!--<a href="#" class="more">Read more</a>-->
  </div>
</div>

<style type="text/css">
.info_image {
  background-image: url('../img/slide1/background1.png'); 
  border: 1px solid black;
}
</style>

如果您希望图片显示在描述上方，可以使用实际的图片标签。请尝试以下操作。

<a href="rot1">Vision</a>
<div class="info_image"><img src="../img/slide1/background1.png" /></div>
<div class="info_heading">Our Vision</div>
<div class="info_description">
    Create ICT as a driver to knowledge-based socioeconomic transformation initiatives.
  <!--<a href="#" class="more">Read more</a>-->
</div>