帶有不同背景圖像的項目符號點

Question

嘗試制作背景圖像而不是要點，但看不到為什么顯示不正確？

我需要他們顯示不同的背景，具體取決於數字上的項目符號。 例如10個子彈，每個子彈具有不同的背景。

https://jsfiddle.net/bigdaddyt_351/nb21c7v4/1/

<ul>
    <li>bullet 1</li>
    <li>bullet 2</li>
    <li>bullet 3</li>
    <li>bullet 4</li>
    <li>bullet 5</li>
    <li>bullet 6</li>
    <li>bullet 7</li>
    <li>bullet 8</li>
    <li>bullet 9</li>
    <li>bullet 10</li>
</ul>


li{
    background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left center;
    display:block;
    text-indent:15px;
    line-height:1.5em
}

Answer 1

該文件稱為精靈。 在您的情況下，每個框都是單個圖像。 在您的CSS中嘗試以下操作：

.bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 12px; height: 12px; margin-right: 5px;}
.bullet-1 {background-position: 0px 0px;}
.bullet-2 {background-position: 5px 0px;}

在列表項中，您需要刪除邊距和填充。 使用這種方式：

li {margin: 0; padding: 0; list-style: none;}

並在HTML中將其指定為：

<li><i class="bullet bullet-1"></i> Hello</li>

等等。

片段

 * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} .bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 10px; height: 10px; margin-right: 5px;} .bullet-1 {background-position: 0px 0px;} .bullet-2 {background-position: -10px 0px;} .bullet-3 {background-position: -20px 0px;} .bullet-4 {background-position: -30px 0px;} .bullet-5 {background-position: -40px 0px;} .bullet-6 {background-position: -50px 0px;} .bullet-7 {background-position: -60px 0px;} .bullet-8 {background-position: -70px 0px;} .bullet-9 {background-position: -80px 0px;} .bullet-10 {background-position: -90px 0px;} 

 <ul class="bullets"> <li><i class="bullet bullet-1"></i> Bullet 1</li> <li><i class="bullet bullet-2"></i> Bullet 2</li> <li><i class="bullet bullet-3"></i> Bullet 3</li> <li><i class="bullet bullet-4"></i> Bullet 4</li> <li><i class="bullet bullet-5"></i> Bullet 5</li> <li><i class="bullet bullet-6"></i> Bullet 6</li> <li><i class="bullet bullet-7"></i> Bullet 7</li> <li><i class="bullet bullet-8"></i> Bullet 8</li> <li><i class="bullet bullet-9"></i> Bullet 9</li> <li><i class="bullet bullet-10"></i> Bullet 10</li> </ul> 

Answer 2

需要使用：before元素和nth-of-type。 例如

li:before{
    background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left 50%;
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    content: " ";
    top:10px;
    left:0;
}
li:first-of-type:before{
    background-position:0 0;
}
li:nth-of-type(2):before{
    background-position:-10px 0;
}
li:nth-of-type(3):before{
    background-position:-20px 0;
}

等等... https://jsfiddle.net/Luw0u4h2/2/