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

можно ли использовать 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-image и list-style-position, но я не уверен, как заставить его работать без наличия таких свойств, как list-style-image-width и list-style-image-height.

    спасибо.

    • 34
    css css-sprites html

    7 ответов

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

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

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

    51

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

    19

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

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

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

+-------+----------------------------------------------------------------------+
| Img 1 |                                                                      |
+-------+                                                                      |
|                                                                              |
|                                                                              |
|                                                                              |
|                                   +-------+                                  |
|                                   | Img 2 |                                  |
|                                   +-------+                                  |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                      +-------+
|                                                                      | Img 3 |
+----------------------------------------------------------------------+-------+
    10

    внутри элемента списка вы делаете пустой промежуток, как это:

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

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

    8

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

    1

    вы можете использовать стиль в ul для выполнения того же самого.

    ul {
list-style:square url(../images/whatever.png);
}
    0

    Я думаю, что использование "традиционных" 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/

    0