我想在CSS中更多地使用Zen，并且还要减少服务器上的负载。我听说过一种技术，我可以使用背景图像和偏移值来允许我在一张图像中下载所有的小图标图像，并使用CSS显示正确的图像。但是，我有点困惑如何正确地做到这一点。具体来说，如果我有一个16x16的图像，在我的大图像中有48个像素，名为img.png，我想要这样的东西：
<img style="background-image: url('img.png'); background-position: 48px" />
（显然将这种风格带入CSS，但为了说明目的而在此处内联。）
然而，img忽略了偏移量。如果我使用像span这样的东西，我不确定如何设置跨度的宽度（实际上我试过了，它似乎忽略了宽度。）
任何帮助都将不胜感激。
答案 0 :(得分：3)
您将使用与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>
答案 1 :(得分：1)
你在考虑CSS精灵。 This article应该指出正确的方向。
答案 2 :(得分：1)
您可以使用this tool生成精灵图片，工具也可以为您生成css