我试图在我的 CSS 中更加禅宗，同时也减少我的服务器上的负载。我听说过并看到了一种技术，我可以使用背景图像和偏移值来允许我将所有小图标图像下载到一个图像中，并使用 CSS 来显示正确的图像。但是，我有点困惑如何正确地做到这一点。具体来说，如果我有一个 16x16 的图像，在我的大图像中有 48 个像素，称为 img.png，我想要这样的东西：
<img style="background-image: url('img.png'); background-position: 48px" />
（显然是把样式放到 CSS 中，但为了说明的目的，这里是内联的。）
但是， img 忽略了偏移量。如果我使用像跨度这样的东西，我不确定如何设置跨度的宽度（实际上我试过了，它似乎忽略了宽度。）
任何帮助，将不胜感激。
您将使用与标签不同的img标签，您需要指定它的大小，并且背景位置应该是负数。例如，您可以使用div标签，因为默认情况下它是块标签，因此您可以为其指定大小：
<div style="width: 16px; height: 16px; background: url('img.png') -48px;"></div>
如果只指定一个偏移量，它的水平位置和垂直位置为零。如果是垂直偏移，则必须同时指定水平和垂直偏移：
<div style="width: 16px; height: 16px; background: url('img.png') 0 -48px;"></div>
您可以使用此工具生成精灵图像，并且该工具会为您生成 css
您正在考虑 CSS 精灵。本文应该为您指明正确的方向。