bullet point с различными фоновыми изображениями

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

нужно использовать: перед тем элементом и п-го из-типа. например

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/

Answer 2

Файл называется спрайтов. Каждый ящик представляет собой одно изображение в вашем случае. В вашем 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>