对列表（< li>）背景图片使用CSS sprites [英] use CSS sprites for list (<li>) background image

问题描述

是否可以使用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作为

元素？有CSS属性名为list-style-image和list-style-position，但我不知道如何使它的工作没有属性，如list-style-image-width和list-style-image-height

解决方案

您也可以使用

  li：before {
 background：url（..）no-repeat  -  ## px  -  ## px; 
 width：## px; 
 height：## px; 
 display：block; 
 position：absolute; 
内容：; 
 top：## px; 
 left：## px; 
} 
  

，从而获得添加到DOM的额外元素， 。

Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this:

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

Is it possible to use sprites for the bullets of <li> elements? There are CSS properties called list-style-image, and list-style-position, but I'm not sure how to make it work without the existence of properties like list-style-image-width and list-style-image-height as well.

Thanks.

解决方案

You can also use

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

and thus get an additional element added to the DOM and give that the background image.

这篇关于对列表（&lt; li&gt;）背景图片使用CSS sprites的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！