html - CSS - 在 li 中显示背景图像

Question

我正在尝试在自定义的圆形 li 中显示图像。我只想在那个 li 中显示一个成功的刻度图像。我有一个 CSS 作为 -

span.round-tabs {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}

li.success span.round-tabs.one {
    background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
 

    
<li class="success">
  <a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
      <span class="round-tabs one">
          <i class="icon icon-profile-male"></i>01
          <h4>Patient's Details</h4>
      </span>
  </a>
</li>

但我得到的结果是:

代替:

我在这里错过了什么？

Answer 1

要么使用

background-position: center center;

或使用

background-position-y 或 background-position-x 正确定位图像。

然后您可能需要使用 CSS 中的 background-size 规则来确保尺寸正确。如果您发布 jsfiddle，我将很乐意将此解决方案实现到其中供您查看。