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

Question

以下是html代码：

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

而不是上面，如果我将图像url直接放入span中，它工作正常：

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

但是当在跨度中给出类名时它不起作用

下面是CSS：

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

我没有在span标签中获得partnerHospitals图像。请问，有人可以建议为什么这不起作用？

Answer 1

因为span没有内容，所以没有大小。您需要为元素添加大小：

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

Answer 2

试试这个

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

Answer 3

有很多事情可能导致这种情况。

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>