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

不确定您在该div标签中引用的课程的内容是什么，但我相信您只需阅读以下内容即可获得所需内容。

http://www.w3.org/WAI/UA/TS/html401/cp0301/0301-CSS-DIV-BACKGROUND-IMAGE.html

Answer 2

看起来这里出现了一些重要的事情。您的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>

Answer 3

在plugin you're using中，类info_image的div包含图片网址。

如果../img/slide1/background1.png是图片网址，则需要输入：

<div class="info_image">../img/slide1/background1.png</div>

而不是：

<div class="info_image">img/slide1/background1.png</div>

和你一样。

Answer 4

<div class="info_image">img/slide1/background1.png</div>

试试这个而不是上面的

<div class="info_image"><img src="img/slide1/background1.png"></div>

html图像没有显示出来

4 个答案: