CSS Sprites - Как скрыть часть баланса изображения

Question

Привет, я использую Image Sprite для отображения различных значков.

XHTML

<div class="ListIcons"> 
    <ul> 
    <li class="Icon i-scissors">A list item using the <strong>i-scissors</strong> class.</li> 
    </ul> 
</div> 

CSS-

.Icon {background:url(../images/icons/icons.png) no-repeat top left;} 
.i-scissors{ background-position: 0 -52px; width: 32px; height: 32px; } 

Вопрос

Мой вопрос

Как скрыть два других изображения, которые отображаются вместе с тем, который я хочу.

Просьба помочь!

спрайта

спрайт изображение, которое я использую это:

Answer 1

Я изменил код немного

HTML

<div class="ListIcons"> 
    <ul> 
    <li class="i-scissors">A list item using the <strong>i-scissors</strong> class.</li> 
    </ul> 
</div> 

CSS

li.i-scissors { 

    list-style: none outside none; 
} 
li.i-scissors:before { 
    background: url(../images/icons/icons.png) no-repeat scroll 0 -52px transparent; 
    content: " "; 
    display: block; 
    position: absolute; 
    width: 23px; 
    height: 32px; 
    top: 11px; 
    left: 19px; 
} 

Вывод будет выглядеть

Вы можете внести изменения в CSS в соответствии с вашими требованиями.

Answer 2

Вы должны сделать еще один узел для значка, что-то вроде этого

<ul> 
<li class="some_class"><span class="Icon i-scissors"></span>A list item using the <strong>i-scissors</strong> class.</li> 
</ul> 

Если вы посмотрите ваш css witdh и height32px, но ваш укус длинный insi де, <li> так разделить его Инти две части