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

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>

添加标记是唯一可靠的选项吗？ EG我可以为每个贴有图像精灵的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;
}