I'm new to sprite, I think i understand the concept of changing the background position to replace the image. so i have this big sprite png that I downloaded but how do I know the position of the icons?
I don't have photo shop, is there any other 开发者_如何学Pythonrecommended tool(free) to find the position?
You can use Sprite Cow for finding icon locations without using an external program. The site serves complicated icon selection posibilities.
You can use a tool like this and get background positions of the icons in the sprite.
You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.
Other options are
You need to open the image in an image editor like Photoshop. From there you can find the X and Y position anywhere in the image. Please note that left, top is 0,0. Get the x and y position and use like this
background-position: -310px -123px;
Please note the "-" sign before X and Y co-ordinates.
Start with
background-position: 1px 1px;
Use Firebug to modify the values on the fly. By trial and error method you can find exact position.
MSPaint displays the cursor position relative to the image on Windows 7. If you use the select tool, it will show the size, and the position.
GIMP or Paint.Net would work too.
You might want to consider using CSS Sprites generator. It will make life a bit easier for you.
GIMP or any primitive image editor will do.
精彩评论