Question

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

图标图像是精灵图像，因此我需要将每个background-size的{{1}}设置为图标大小。

如何使用CSS执行此操作？

Answer 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/。

Answer 2

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

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

这样的标记

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

并使用适当的高度和背景图像精灵设置span元素的样式。使用此方法，您的li元素可以具有任何高度，只会显示相应的图标，尽管您的精灵包装密集。

Answer 3

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

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

Answer 4

这是一个例子。将您的精灵交换到浅灰色区域：http://jsfiddle.net/Pf7Xs/

这就是你问的问题吗？精灵区域和文本在同一大小的<li>内？

您大部分时间都会使用line-height和height来排列您想要的内容。希望有所帮助。

与css的背景大小与sprites

4 个答案: