背景尺寸与css与精灵 [英] Background size with css with sprites

问题描述

我有一个列表，每个< li> 都有一个图标和一个文本。

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

图标的图片是一个sprite图片，因此我需要设置 background-size

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

如何用css这样做？

推荐答案

您可以在CSS3中设置背景图片大小，例如 background-size：32px 32px; 跨浏览器兼容，我想这是你的关注是。

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.

除非sprite是很好的间距和垂直，我的建议是使用一点额外的标记。例如，使用像

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>

并设置适当高度的 span 和背景图像精灵。使用这种方法，你的 li 元素可以有任何高度，只有适当的图标会显示，尽管你的sprite是多么密集。

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.

这篇关于背景尺寸与css与精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！