负面背景位置的CSS精灵不清晰
问题描述：
我正在使用一些现有的代码，他们正在使用CSS精灵。有很大的图像，它被用来显示所有的图像。负面背景位置的CSS精灵不清晰
它基本上是一个UI和li元素。每个li元素使用此图像并使用背景位置。
我完全理解了css sprite，它的性能更好。但只有不清楚的是，为什么x和y的位置是以负利润率开始的。大多数精灵的图像越来越被使用的东西retrived像
-540px -30px like this
我在看的浏览器，图像，并将其correcetly显示出来，他们应该有0,0权。
我在这里缺少的东西
答
想想元素作为一个窥视孔，与精灵图像移动后面。
0,0是窥视孔的左上角。
根据你想要看到的巨大精灵图像的哪一部分，你需要需要给它一个负偏移量。
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-----| |
| | | <--- Peep-hole |
| |-----| |
| |
| |
|-----------------------------------------------|
答
http://www.alistapart.com/articles/sprites
你有萤火虫？ http://getfirebug.com
如果是这样，只要检查其中一个具有精灵背景的元素，并将背景位置更改为0 0.然后，只需开始播放定位，您应该能够弄清楚它是如何工作的。
background-position: 0 0;表示将背景图像从左边算起0像素，从顶部算起0像素。
background-position: 0 -50px;表示将背景图像放置在左边界0像素和上边界50像素之间，有效地将背景图像移动50像素。使用萤火虫自行试用或更改样式表并刷新以查看效果。
答
换句话说：你离左上角的窥视孔有多远。如果您的背景位置为-50，-20，则表示如果要将窥视孔移动到左上角，则必须向左移动50px（因此为负），向上移动20px（因此也为负）。所以定位是从窥视孔的角度以及它的位置是从左上角开始测量的。
感谢您的回答，如果可能的话，您能否以一些外行人的语言解释更多，我仍然不明白。 – kobe 2011-03-19 21:41:19
@siri如果指定了'0,0'，则CSS精灵图像的左上角将与元素的左上角相同。所以元素将显示精灵图像左上角的任何内容。但是，如果您想要显示的图标在右侧到目前为止还未显示在元素中，该怎么办？您需要将精灵图像移动到左侧。只要你这样做，偏移量就会变成负值。这更容易理解吗？ – Unicron 2011-03-19 21:46:11
@Unicorn，谢谢，我现在明白了。我在想图像清晰可见，为什么我们使用负边距。 – kobe 2011-03-19 21:48:53