Question

是否可以将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>

是否可以将精灵用于＆lt; li＆gt;的子弹。元素？有一些名为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;
}

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

Answer 5

你可以通过将你的图像放在精灵图像的底部而没有右边的图像来解决这个问题。

Answer 6

你可以使用英国的风格来完成同样的事情。

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

Answer 7

我认为使用'传统'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/

使用CSS精灵列表（<li>）背景图片</li>

7 个答案: