我正在使用一些現有的代碼，他們正在使用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