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

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

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

p{
背景：金；
线高：6em；
}
正文

文本2

文本3

文本4

---

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

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

使用背景大小：作为%也有助于使图像精灵响应和调整大小。

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:before {
  content: '';
  display: inline-block;
  background: url('http://placekitten.com/100/100') no-repeat;
  width: 50px;
  height: 50px;
}