использовать спрайты CSS для фонового изображения списка (‹li›)

Можно ли использовать спрайты 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>

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

Спасибо.


html css css-sprites
person Emmett    schedule 04.03.2010    source источник

Ответы (7)


arrow_upward
53
arrow_downward

Вы также можете использовать

li:before {
    background:url(..) no-repeat -##px -##px;
    width:##px;
    height:##px;
    display:block;
    position:absolute;
    content: " ";
    top:##px;
    left:##px;
}

и, таким образом, добавить дополнительный элемент в DOM и дать ему фоновое изображение.

person designitsimple    schedule 10.08.2011
comment
Хотя концептуально мне не нравится добавлять элемент DOM, это работает очень хорошо и является чистой реализацией. Я использую это до тех пор, пока мне не нужно поддерживать IE7. caniuse.com/#search=:before - person jon skulski; 11.04.2012
comment
И если вам нужно поддерживать IE7, IE8.js исправляет это code.google.com/p /ie7-js - person jsims281; 02.12.2012
comment
Я люблю это! Спасибо за этот фрагмент! Работает в IE8 здесь, изначально. - person kernel; 15.07.2013

arrow_upward
18
arrow_downward

вы можете использовать точно такой же метод для создания спрайтов 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. Лично я раньше не видел, чтобы материал list-style-image использовался раньше, но знаю, что вышеизложенное является распространенным решением.

person Hux    schedule 04.03.2010

arrow_upward
10
arrow_downward

Фоновые изображения элементов списка с помощью спрайтов имеют подводные камни из-за переменной высоты и ширины. Подумайте о пользователях, которые увеличивают размер шрифта. Теперь ваша воображаемая высота li становится больше, чем ожидалось, и становятся видны другие ваши изображения спрайтов. Наиболее полезно для списка и спрайтов, когда изображения выровнены по верхнему левому краю. Размещение изображений по диагонали снизу слева вверх справа дает больше шансов предотвратить видимость других элементов спрайта. Левые вертикальные центрированные изображения требуют фиксированной ширины внешнего элемента (например, 800 пикселей), а ширина изображений спрайтов становится шириной, умноженной на количество различных изображений. 10 различных делений, умноженных на 800 пикселей = 8000 пикселей в ширину спрайта.

Графический пример:

|--------------- 800px -------------|
                                    |--------------- 800px ------------|

+-------+----------------------------------------------------------------------+
| Img 1 |                                                                      |
+-------+                                                                      |
|                                                                              |
|                                                                              |
|                                                                              |
|                                   +-------+                                  |
|                                   | Img 2 |                                  |
|                                   +-------+                                  |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                      +-------+
|                                                                      | Img 3 |
+----------------------------------------------------------------------+-------+
person Pro Backup    schedule 20.03.2011
comment
Теоретически вы могли бы расположить их вертикально, если бы знали, что высота элемента списка не будет больше определенного размера. Изображение будет меньше, но я не знаю, насколько это повлияет на размер файла. - person THEtheChad; 27.01.2012

arrow_upward
8
arrow_downward

Внутри элемента списка вы создаете пустой диапазон следующим образом:

<ul>

<li>
<span class="bullet"></span> Example text
</li>

</ul>

В вашем css вы стилизуете так

.bullet
{
    height: 10px;
    width: 10px;
    position: relative;
    top:2px; /*to align vertically*/
    display: inline-block;
    overflow: hidden;
    background-image: url(/sprite.png);
    background-position: 0 -30px;
}

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

person ctrombley    schedule 26.03.2012

arrow_upward
1
arrow_downward

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

person user3004751    schedule 18.11.2013

arrow_upward
0
arrow_downward

вы можете использовать стиль в ul, чтобы сделать то же самое.

ul {
list-style:square url(../images/whatever.png);
}
person gumbar    schedule 23.11.2011
comment
Но как использовать спрайты с помощью этого метода? - person Lea Cohen; 24.11.2011

arrow_upward
0
arrow_downward

Я думаю, что использование «традиционных» csssprites слишком рискованно, как указывает @Pro Backup.

Это был лучший компромисс для меня. Вы помещаете изображение в формат base64 и резервный стандартный стиль для [действительно] старых браузеров. Таким образом, у вас есть только 1 запрос на css. Типичная закодированная пуля должна состоять всего из пары сотен байтов.

li
{
    list-style: square;
    list-style-image: url(data:image/png;base64,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);
}

Просмотреть: http://jsfiddle.net/VThLq/1/

person Simon_Weaver    schedule 16.01.2013