css - 当元素大于图像时如何使用图像 Sprite ？

Question

如果我想使用 image sprites 但 im 样式元素比单个图标大得多，可以这样做吗？

假设下面我想用一个与实际文本大小大致相同的小图标来设置每个 p 的样式。为了阻止图像 Sprite 中的其他图标可见，我需要在每个图标之间留出大量空白，这可能会抵消文件大小和 http 请求数量带来的好处。

http://jsfiddle.net/MFpxD/1/

p {
       background: gold;
        line-height: 6em;
}
<p>Text</p>
<p class="one">Text 2</p>
<p class="two">Text 3</p>
<p class="three">Text 4</p>

添加标记是唯一可靠的选择吗？ EG 我可以为每个应用了图像 Sprite 的 p 标签添加一个跨度，并且还具有固定的高度和宽度。然而，理想情况下，id 就像一个不添加标记的解决方案。

Answer 1

您可以使用 :before/:after 伪元素来包含您的 Sprite :

http://cssdeck.com/labs/g99y1q0b

p:before {
  content: '';
  display: inline-block;
  background: url('http://placekitten.com/100/100') no-repeat;
  width: 50px;
  height: 50px;
}