css sprite负背景位置不清楚 [英] css sprite with negative background positions not clear

问题描述

我正在使用一些现有的代码，他们在使用css sprites。有大图片，并用于显示所有图片。

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.

它基本上是一个UI和li元素。每个li元素使用此图像并使用背景位置。

Its basically a Ul and li elements. The each li element uses this image and uses a background position.

我理解css sprites完全，其更好的性能。但只有不清楚的事情是为什么x和y位置从负边距开始。通过使用像

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

我在浏览器上看到这张图片，显示正确，他们应该与0,0对。

I was watching that image on the browser and it shows up correcetly and they should with 0,0 right.

我在这里缺少一些东西

推荐答案

，其中sprite图像在其后面移动。

Just think about the element as a peep-hole, with the sprite image being moved behind it.

0,0

根据您想要查看的巨大精灵图片的哪一部分，您需要给它一个负偏移。

Depending on which part of the huge sprite image you want to see, you need to give it a negative offset.

-50, -20
|-----------------------------------------------|
|                                               |
|       0,0                                     |
|       |-----|                                 |
|       |     |  <--- Peep-hole                 |
|       |-----|                                 |
|                                               |
|                                               |
|-----------------------------------------------|

这篇关于css sprite负背景位置不清楚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！