带有负背景位置的CSS精灵不清晰
我正在研究一些使用 css sprites 的现有代码。有大图像，它用于显示所有图像。
它基本上是一个 Ul 和 li 元素。每个 li 元素都使用该图像并使用背景位置。
我完全理解CSS精灵，它是为了更好的性能。但唯一不清楚的是为什么 x 和 y 位置以负边距开始。精灵中的大多数图像都是通过使用类似于
-540px -30px like this
我在浏览器上观看该图像的方式来检索的，它正确显示，并且它们应该正确显示 0,0。
我在这里错过了什么吗
I am working on some existing code where they are using css sprites. There is big image and its been used for to display all the images.
Its basically a Ul and li elements. The each li element uses this image and uses a background position.
I understood the css sprites completly ,its for better performance. But only thing which is not clear is why the x and y positions start with negative margins. Most of the images in the sprites are getting retrived by using something like
-540px -30px like this
I was watching that image on the browser and it shows up correcetly and they should with 0,0 right.
am i missing something here
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
只需将该元素想象为一个窥视孔，精灵图像移动到其后面。
0,0是窥视孔的左上角。根据您想要查看巨大精灵图像的哪一部分，您需要为其指定负偏移量。
Just think about the element as a peep-hole, with the sprite image being moved behind it.
0,0is the top left corner of the peep-hole.Depending on which part of the huge sprite image you want to see, you need to give it a negative offset.
换句话说：你的窥视孔距离左上角有多远。如果您的背景位置为 -50、-20，则表示如果您要将窥孔移动到左上角，则它必须向左移动 50px（因此为负数）并向上移动 20px（因此也是负数）。所以定位是从窥视孔的角度来衡量的，以及它的位置是如何从左上角开始的。
Said another way: How far away is your peep hole from the top left corner. If you have a background position of -50, -20 that indicates that if you were to move the peep hole to be in the top left corner it would have to move left 50px (hence negative) and up 20px (hence also negative). So positioning is measure from the perspective of the peep hole and how its position is from the top left corner.
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 自己尝试一下，或者只是更改样式表并刷新以查看效果。http://www.alistapart.com/articles/sprites
Do you have firebug? http://getfirebug.com
If so, just inspect one of the elements with the sprite background and change the background position to 0 0. Then just start playing around with the positioning and you should be able to figure out how it works.
background-position: 0 0;means put the background image 0 pixels from the left and 0 pixels from the top.background-position: 0 -50px;means put the background image 0 pixels from the left border, and 50 pixels above the top border, effectively moving the background image up 50 pixels. Try it out on your own using firebug or just changing the stylesheet and refreshing to see the effects.