CSS Как отобразить один значок из матрицы для элемента списка

Question

Я хотел бы использовать один значок из матрицы значков (с примерно 16 x 16 значками) в качестве изображения маркера для списка.Я могу расположить фоновое изображение с background-position и повторить: norepeat.Но при этом отобразится вся строка оставшейся части матрицы, поэтому я ищу способ обрезать фоновое изображение.(Используя это, я могу просто добавить различные линии фона в моем CSS для разных состояний, таких как открытое свернутое наведение и т. Д.)Не обязательно запускать в Internet Explorer.Я искал сгенерированный контент, но не думаю, что этого нельзя достичь с помощью этого.Следующим шагом у меня будет jquery, создающий span или div перед текстом, но было бы неплохо, если бы я мог решить эту проблему, используя чисто CSS.

Answer 1

HTML

<ul>
 <li><a href="" title="">link#1</a></li>
</ul>

CSS

li {background: url(sprite.gif) no-repeat 0 0; padding: 0 0 0 16px;}
a {text-transform: uppercase;}

Чтобы отобразить 2-й значок в 3-м ряду

li {background: url(sprite.gif) no-repeat 16px -48px; padding: 0 0 0 16px;}

ПРИМЕЧАНИЕ: sprite.gif имеет 16 значков,каждый 16x16px, установленный в матрице 16x16

Answer 2

Вы можете изменить свой спрайт так, чтобы значки были разложены так, чтобы, несмотря на установку его в качестве bg для всего li, другие значки не отображались.

From:

||||

Кому:

|

|

|

|

Альтернатива будет полагаться на контейнер 16x16 px, как уже упоминалось.

Answer 3

Вы можете присвоить тегу сплошной фон и отступы, чтобы скрыть то, что вы не используете, но недостатком является то, что вы не можете нажать на значок.

Answer 4

Я не думаю, что это возможно.CSS3 позволяет изменять размер фонового изображения, но не обрезать.

Вы должны поместить фоновое изображение в контейнер 16 x 16 пикселей.