html - 将 CSS sprites 用于列表 (<li>) 背景图像

Question

是否可以将 CSS sprites 用于列表背景图像？通常，我会像这样使用 CSS 渲染 Sprite :

.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>

是否可以为

元素的元素符号使用 sprite？有称为 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 中并为其提供背景图像。