我正在研究一些使用css sprites的现有代码。有大图像，用于显示所有图像。
它基本上是一个Ul和li元素。每个li元素使用此图像并使用背景位置。
我完全理解css sprites，它的性能更好。但唯一不明确的是为什么x和y位置以负边距开始。精灵中的大多数图像都是通过使用
之类的东西来重新获得的-540px -30px like this
我正在浏览器上观看该图片并且显示正确，并且它们应该正确0,0。
我在这里遗漏了什么
答案 0 :(得分：11)
只需将元素视为窥视孔，将精灵图像移动到其后面。
0,0是窥视孔的左上角。
根据您想要看到的巨大精灵图像的哪个部分，需要给它一个负偏移量。
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-----| |
| | | <--- Peep-hole |
| |-----| |
| |
| |
|-----------------------------------------------|
答案 1 :(得分：2)
另一种说法：从左上角看你的窥视孔有多远。如果您的背景位置为-50，-20表示如果您要将窥视孔移动到左上角，则必须向左移动50px（因此为负）并向上移动20px（因此也为负）。因此，定位是从窥视孔的角度以及它的位置如何从左上角开始测量的。
答案 2 :(得分：1)
http://www.alistapart.com/articles/sprites
你有萤火虫吗？ http://getfirebug.com如果是这样，只需检查其中一个具有精灵背景的元素，然后将背景位置更改为0 0.然后开始玩定位，你应该能够弄清楚它是如何工作的。
background-position: 0 0;表示将背景图像从左侧0像素，从顶部0像素。
background-position: 0 -50px;表示将背景图像放在左边框0像素，顶部边框上方50像素，有效地将背景图像向上移动50像素。使用firebug自行尝试，或只是更改样式表并刷新以查看效果。