So wenden Sie das Hintergrundbild als Hochstellung auf ein HTML-Element an

Question

Ich habe drei Kreise mit Inhalt. Ich habe bereits Hintergrundfarben für diese Listenelemente angegeben. Ich versuche, ein anderes Hintergrundbild auf das zweite Kind als Bild anzuwenden. Gibt es einen besseren Weg, es zu tun .. Ich versuchte zu implementieren, aber nicht funktioniert ...

verwende ich den Code <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>

Und die CSS-i haben

Answer 1

Ich habe den folgenden Code verwendet, um das gleiche Ergebnis zu generieren.

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

und die CSS wird

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; 
    }