伪精灵

您知道 CSS 精灵 吗？ 当您知道要应用它们的元素的高度和宽度时，它们非常有用，因为您可以创建一个非常紧凑的精灵图像并使用非常精确的坐标来精确地显示您想要的位。

当您知道元素的宽度或高度时，精灵也​​非常有用。 在这种情况下，您将所有精灵在已知方向上对齐。 假设您知道宽度 - 您可以通过其 X 坐标和宽度引用它们，但不必担心未知/可变高度意外显示其他图像。

当您想在无法知道宽度或高度的元素上使用精灵时，精灵就会“失败”。 考虑一个段落 (<p></p>) 元素。 您可能有一个流体布局，因此您无法依赖宽度¹，并且段落可以包含任意数量的词语，因此您无法依赖高度。 但您仍然希望能够在上面使用精灵中的图像。

在这种情况下，您需要的是一个元素，您可以在该元素内对段落强制执行宽度/高度/两者以将精灵应用到该元素。 你可能会想

<p>
   <span class="star"></span>
   Lorem ipsum...
</p>

然后我们可以使用 span 来应用星号。

.star {
   /* Size of star within sprite */
   width: 24px;
   height: 24px;

   /* Sprite */
   background: url(sprite.png) -24px 0 no-repeat;
   
   /* Position/Spacing */
  float: left; 
  margin: 0 10px 2px 0; 
}

但是我们试图应用的这个星号纯粹是美观的，因此最好避免为此专门使用标记。 让我们放弃它并使用伪元素！ 当您需要一个元素在页面上工作但又不想添加额外的标记时，伪元素是 完美的答案。

让我们将类名放在段落上（可能更具语义）

<p class="star">
   Lorem ipsum...
</p>

并使用 CSS 伪元素 (:before) 添加一个具有已知宽度和高度的元素，以便在其中应用图像

.star:before {
   /* Empty content, but required for pseudo element to display */
   content: "";
   
   /* Size of star within sprite */
   width: 24px;
   height: 24px;

   /* Sprite */
   background: url(sprite.png) -24px 0 no-repeat;
   
   /* Position/Spacing */
  float: left; 
  margin: 0 10px 2px 0; 
}

查看演示

还有其他方法吗？

处理未知高度/宽度情况的另一种可能方法是将精灵对角排列（我第一次从 Aaron Barker 那里看到了这种技术）。 这样，您就可以在父元素具有未知宽度和高度的情况下切出一个单独的精灵。

这很聪明，但它有一些相当显著的缺点

1. 精灵的尺寸（以及可能的文件大小）保证大于单行中的精灵，或者更好的是，压缩成一个紧凑的正方形。
2. 上面显示的对角线如果要将图像定位在左上角或右下角将起作用，但不能定位在右上角或左下角（或任何其他地方）。

伪元素方法没有这些缺点。

相关

伟大的思想家思维一致。 Rick Harris 有一篇类似的文章：Sprites 和 CSS 伪元素。

---

¹ 即使您可以依赖段落的宽度，将精灵的间距设为段落宽度也不切实际，并且违背了精灵的核心理念：效率。