Размер фона css со спрайтами

Question

У меня есть список, и у каждого <li> есть значок и текст.

Изображение значков является спрайтовым изображением, поэтому мне нужно установить background-size каждого li, чтобы иметь размер значка.

Как я могу сделать это с помощью CSS?

Answer 1

Для изображений, которые поддерживают текст, таких как списки с иконками, было бы лучше использовать псевдоэлементы CSS: before или: after. Это сохраняет ваш HTML в чистоте.

<ul>
   <li>List Item</li>
   <li>List Item</li>
</ul>

li:before
{
   content: "";
   width: 1em;
   height: 1em;
   background: url("image.png") -12px -12px no-repeat transparent;
   display: inline-block;
}

Для получения более подробной информации об этой технике, проверьте http://css -tricks.com / .

Answer 2

Вы можете установить размер фонового изображения в CSS3, например, background-size: 32px 32px;, но это не совсем совместимо с браузерами, и я думаю, это то, что вас беспокоит.

Если спрайт не является хорошо разнесенным и вертикальным, я бы рекомендовал использовать немного дополнительной разметки. Например, используйте разметку как

<li><span class="ico"></span>This is an li element.</li>

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

Answer 3

Вот пример. Поменяйте местами спрайт на светло-серую область: http://jsfiddle.net/Pf7Xs/

Это то, что вы спрашивали? Наличие области спрайта и текста в пределах <li> того же размера?

В основном вы будете использовать line-height и height, чтобы выстроить то, что вы хотите. надеюсь, что это поможет.

Answer 4

Вам нужно установить высоту. повторение фона LI, а также отступы.

Вот удобное руководство: preview.moveable.com / JM / ilovelists