Background size with css with sprites

问题:

I have a list and each <li> has an icon and a text.

The image of icons is a sprite image, so I need to set the background-size of each li to have the size of an icon.

How can I do this with CSS?

回答1:

You can set the background image size in CSS3 like background-size: 32px 32px; but that is not really cross-browser compatible and I guess that is what your concern is.

Unless the sprite is well spaced out and vertical, my recommendation would be to use a bit of extra markup. For example, use markup like

<li><span class="ico"></span>This is an li element.</li>

and style the span element with appropriate height and background image sprite. Using this method, your li elements can have any height and only the appropriate icon would show up, despite how densely packed is your sprite.

回答2:

For images that support text - such as lists with icons - you would be better off using CSS pseudo-elements :before or :after. This keeps your HTML clean.

<ul>
   <li>List Item</li>
   <li>List Item</li>
</ul>

li:before
{
   content: "";
   width: 1em;
   height: 1em;
   background: url("image.png") -12px -12px no-repeat transparent;
   display: inline-block;
}

For more details on this technique, check out http://css-tricks.com/.

回答3:

You need to set the height. background-repeat of the LI as well as the padding.

Here is a handy tutorial: preview.moveable.com/JM/ilovelists

回答4:

Here is an example. Swap place your sprite on the light gray area: http://jsfiddle.net/Pf7Xs/

Is this what you were asking? Having a sprite area and the text within an <li> of the same size?

You mostly will be using line-height and height to line up what you want. hope that helps.