使用CSS sprite作为列表(<li>)背景图像

Question

是否可以使用CSS sprite作为列表背景图像？通常,我用这样的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>元素的子弹？有一些名为list-style-image和list-style-position的CSS属性,但我不知道如何在没有list-style-image-width和list-style-image-height等属性的情况下使其工作同样.

谢谢.

Answer 1

你也可以使用

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

从而获得添加到DOM的附加元素并给出背景图像.

Answer 2

您可以使用完全相同的方法在List上执行CSS sprites.这是一个快速示例:

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样式删除默认填充/边距.就个人而言,我还没有看到之前使用过的列表式图像,但知道上面是一个常见的解决方案.

Answer 3

由于高度和宽度的变化,通过精灵列出元素背景图像有可能性.想想扩大字体大小的用户.现在你想象中的高度变得比预期更高,你的其他精灵图像变得可见.列表和精灵最有用的是图像左上角对齐.从左下角到右上角对角堆叠图像可以最大程度地防止其他精灵元素变得可见.左垂直居中图像需要外部元素的固定宽度(例如800px),并且精灵图像的宽度变为宽度,乘以不同图像的数量.10个不同的刻度标记乘以800 px = 8000px宽的精灵.

一个图形示例:

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

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

Answer 4

在列表项中,您可以像这样创建一个空的跨度:

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

这将有助于解决用户增加文本大小和揭示精灵的其他部分的问题.希望能有所帮助.