背景大小与精灵的CSS

Question

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

图标的图像是一个精灵的形象，所以我需要设置每个background-size的li有一个图标的大小。

我怎样才能做到这一点与CSS？

Answer 1

您可以在CSS3设置背景图片的大小一样background-size: 32px 32px;但这并不是真正的跨浏览器兼容的，我想那就是你的问题是什么。

除非精灵很好地隔开，垂直，我的建议是使用一些额外的标记。例如，使用标记像

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

和风格合适的高度和背景图像精灵的span元素。使用这种方法，您li元素可以有任何高度，只有相应的图标，就会显示出来，尽管如何密密麻麻的是你的精灵。

Answer 2

对于支持文本图像 - 比如带图标列表 - 你会使用CSS伪元素会更好：或前：后。这样可以使你的HTML干净。

<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;
}

有关这一技术的详细信息，请查看http://css-tricks.com/。

Answer 3

您需要设置的高度。李的背景重复以及填充。

这是一个方便的教程：preview.moveable.com/JM/ilovelists

Answer 4

下面是一个例子。 SWAP地方你的精灵的浅灰色区域：http://jsfiddle.net/Pf7Xs/

这是你问的是什么？有一个精灵区域和相同尺寸的<li>中的文本？

你大多会使用line-height和height排队，你想要什么。希望帮助。