CSS 如何从精灵图像中找到图像的像素位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1452961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to find pixel position of image from sprite image
提问by ArK
I want to know how to find an image position(coordinates) while using sprite imagefor styling.
我想知道如何在使用精灵图像进行造型时找到图像位置（坐标）。
回答by Nina
Another, easier way to do this is through this site called Sprite Cow. I just tried it recently, and it makes things go by much faster.
另一种更简单的方法是通过这个名为Sprite Cow 的站点。我最近刚试过，它使事情进展得更快。
回答by kiranvj
You can use a tool like thisand 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. (Disclaimer: I made this sometime back)
您需要先上传图片，然后从精灵中选择一个图标。将生成 CSS，只需复制生成的 CSS 并在您的类中使用它。（免责声明：我曾经做过这个）
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;
您需要在 Photoshop 等图像编辑器中打开图像。从那里您可以找到图像中任何位置的 X 和 Y 位置。请注意左边，顶部是 0,0。获取 x 和 y 位置并像这样使用
背景位置：-310px -123px;
Please note the "-" sign before X and Y co-ordinates.
请注意 X 和 Y 坐标前的“-”号。
Start with
background-position: 1px 1px;
从...开始
背景位置：1px 1px；
Use Firebug to modify the values on the fly. By trial and error method you can find exact position.
使用 Firebug 动态修改值。通过试错法，您可以找到准确的位置。
回答by Irshad Khan
I Found one amazing online Tool to Generate Sprite image CSS code.
我发现了一个很棒的在线工具来生成 Sprite 图像 CSS 代码。
Link : https://getspritexy.netlify.com/
链接：https: //getspritexy.netlify.com/
It Will help you in Image Pixel generation. Very useful for me.
它将帮助您生成图像像素。对我很有用。
回答by meder omuraliev
Use a graphical editing program such as Gimp/Photoshop and write the coordinates/position down as you're writing the CSS.
使用图形编辑程序（例如 Gimp/Photoshop）并在编写 CSS 时记下坐标/位置。
回答by Boufouss Mohamed
try this example helped me alot when I tried the spritestuff the 1st time.
当我第一次尝试精灵的东西时，试试这个例子对我有很大帮助。
<style type="text/css">
#avocado{
width: 104px;
height: 95px;
background: url(http://2.bp.blogspot.com/-gwRqiyz9X8k/VM0vhBscDsI/AAAAAAAACVA/hITMUs6BjOg/s1600/foods-that-are-toxic-to-dogs.jpg) -110px -121px;
}
</style>