используйте спрайты CSS для списка (<литий>) фоновое изображение

Question

используйте спрайты CSS для списка (<литий>) фоновое изображение

Действительно ли возможно использовать спрайты CSS для фонового изображения списка? Обычно, я представляю свои спрайты с CSS как это:

.sprite { background: url(sprite.png) no-repeat top left;}
.sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } 
.sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; }

<div class="sprite sprite-checkmark"></div>

Действительно ли возможно использовать спрайты для маркеров <лития> элементы? Существуют свойства CSS, названные изображением стиля списка и list-style-position, но я не уверен, как заставить его работать без существования свойств как list-style-image-width и list-style-image-height также.

Спасибо.

35

html css css-sprites

задан Emmett 4 March 2010 в 18:37

1 ответ

Другие вопросы по тегам:

html css css-sprites

Похожие вопросы:

score 18 · Answer 1

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

ul { 
  list-style-type:none;
}

ul li {
  background:url(images/list-image.gif) no-repeat;
  height:24px;
}

ul li.comment {
  background-position: 0 -24px;
  /*Override properties here if you wish */
}

И html

<ul>
   <li class="comment">Test</li>
</ul>

. Вам нужно будет удалить отступы / поля по умолчанию с соответствующими стилями CSS. Лично я не видел, чтобы раньше использовались элементы изображения в стиле списка, но знаю, что приведенное выше является распространенным решением.