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

Question

如果我想使用图像精灵，但样式中的元素比单个图标大得多，可以这样做吗？

让我们说，我想为每个 p 设置一个与实际文本大小大致相同的小图标。为了阻止图像精灵中的其他图标可见，我需要在每个图标之间留出大量空白，这可能会抵消文件大小和 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>

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

Answer 1

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

http://cssdeck.com/labs/g99y1q0b

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