css - 如何在网页中使用精灵

Question

我对使用精灵图像很感兴趣。

出于教育原因，我一直在研究 SO 的 CSS 并发现不是单独的图像，而是从整个 png 图像中获取诸如 up + down 投票之类的项目。

background-image:url('img/sprites.png?v=5')

我将如何从组装的 png 中提取单个图像？所以我可以在我的网站中使用它，这似乎比在子目录中拥有大量图像更有效，而不是在 1 中收集主要图像？

Answer 1

关键是background-position：您构建这样一个精灵图像，然后计算每个图像的偏移量。然后设置适当的值。您还必须为保持背景的元素指定正确的宽度和高度。

示例（从此处的向上箭头）：

background-position: 0 -265px;
height: 25px;
width: 41px;

您设置相同background-image但不同的位置。