Geek asks and answers

CSS sprite with negative background fuzzy position

I am working on some existing code where they use css sprites. There is a large image, and it is used to display all images.

These are mainly elements Ul and li. Each li element uses this image and uses a background position.

I understood css sprites completely, its for better performance. But it is only unclear why the positions x and y begin with negative fields. Most sprite images get extraction using something like

-540px -30px like this

I watched this image in the browser, and it displays correctly, and they should with 0.0 correctly.

I'm missing something here

+3
source share
3 answers

, .

0,0 - .

, , .

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

-: . -50, -20, , , 50px (, ) 20px (, ). , - .

+2

http://www.alistapart.com/articles/sprites

firebug? http://getfirebug.com

If so, just inspect one of the elements with the sprite background and change the position of the background to 0 0. Then just start playing with positioning and you can figure out how it works.

background-position: 0 0; means the background image is 0 pixels on the left and 0 pixels on the top.

background-position: 0 -50px;means that the background image is 0 pixels from the left border and 50 pixels above the top border, effectively moving the background image by 50 pixels. Try it on your own, using firebug or just changing the stylesheet and updating to see the effects.

+1
source

More articles:


All Articles