带精灵的 css 的背景大小答案

【问题标题】：Background size with css with sprites带精灵的 css 的背景大小
【发布时间】：2012-02-01 16:36:13
【问题描述】：

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

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

如何使用 CSS 做到这一点？

【问题讨论】：

【解决方案1】：

对于支持文本的图像（例如带有图标的列表），最好使用 CSS 伪元素 :before 或 :after。这样可以保持您的 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/。

【讨论】：

【解决方案2】：

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

除非精灵的间距很好且垂直，否则我的建议是使用一些额外的标记。例如，使用

之类的标记

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这是一个例子。 Swap 将你的精灵放在浅灰色区域：http://jsfiddle.net/Pf7Xs/

这是你问的吗？有一个精灵区域和<li> 内的文本大小相同？

您将主要使用line-height 和height 来排列您想要的东西。希望对您有所帮助。

【讨论】：