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

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

2 голосов
/ 19 марта 2012

Привет! Я использую 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; }

Проблема

enter image description here

Мой вопрос

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

Пожалуйста, помогите!

Спрайт

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

enter image description here

Ответы [ 2 ]

5 голосов
/ 19 марта 2012

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

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

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

list sprite

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

2 голосов
/ 19 марта 2012

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

 <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 и height равны 32px, но у вас длинный жало внутри, <li> так поделить на две части

...