如何将CSS中的图像添加到html中的跨度

时间:2019-03-13 13:01:26

标签: html css

下面是html代码:

 <div class="whyimgbx">
       <span class="partnerHospitals">
       </span>
 </div>

代替上面的内容,如果我直接将图片网址指定为跨度,则效果很好:

<span><img src="assets/images/1.png" alt=""></span>

但是当跨度提供类名时,它不起作用

下面是CSS:

.partnerHospitals {
   background-image: url(assets/images/1.png)!important;
}

我在span标签中没有得到partnerHospitals张图片。拜托,有人可以建议为什么这不起作用吗?

3 个答案:

答案 0 :(得分:4)

因为跨度没有内容,所以没有大小。您需要为元素添加尺寸:

.partnerHospitals {
   background-image: url(assets/images/1.png);
   display: block; // or inline-block to preserve spans behaviour
   width: 150px;
   height: 150px;
}

答案 1 :(得分:0)

尝试

.partnerHospitals {
   background-image: url(assets/images/1.png);
   width: yourWidth;
   height: yourHeight;
   display:block
}

答案 2 :(得分:0)

很多原因都可能导致这种情况。

  1. 跨度partnerHospitals未设置宽度/高度。因此它不占用任何空间。
  2. 图片的网址不正确。
  3. 其他:)

对于1.检查下面的答案

.partnerHospitals {
  width: 100px;
  height: 100px;
  background-image: url("https://via.placeholder.com/50x50");
  display: inline-block;
}
<div class="whyimgbx">
           <span class="partnerHospitals">
           </span>
 </div>