如何将背景图像作为上标应用于HTML元素

Question

我有三个带有内容的圆圈。我已经为这些列表项目提供了背景颜色。我正在尝试将另一个背景应用于第二个孩子作为图像。有没有更好的办法做到这一点..我试图实现，但不工作了......

我使用的代码<li class="active-circle"> <span class="bold active-circle-inner">aaa</span><br> <span class="active-circle-inner">aaa</span> </li> <li class="active-circle"> <span class="bold active-circle-inner">bbb</span><br> <span class="active-circle-inner">bbb</span> </li>
<li class="active-circle"> <span class="bold active-circle-inner">ccc</span><br> <span class="active-circle-inner">ccc</span> </li>

而CSS我已经是

Answer 1

我使用下面的代码来生成相同的结果。

<ul> 
<li class="first"></li> 
<li class="second"> 
    <div class="outer-circle"></div> 
</li> 
<li class="third"></li></ul> 

和CSS将

ul 
{ 
    list-style: none; 
    display: inline-block; 
} 
    .first 
    { 
     background-color: black; 
     height: 100px; 
     width: 100px; 
     border-radius: 50%; 
     display: inline-block; 
    } 
    .second 
    { 
     background-color: blue; 
     height: 100px; 
     width: 100px; 
     border-radius: 50%; 
     display: inline-block; 
    } 
    .third 
    { 
     background-color: green; 
     height: 100px; 
     width: 100px; 
     border-radius: 50%; 
     display: inline-block; 
    } 
    .outer-circle 
    { 
     background-color: black; 
     height: 50px; 
     width: 50px; 
     border-radius: 50%; 
     z-index: 1; 
     position:absolute; 
     margin-left: 50px; 
    }