如何找到精灵图像

图像的像素位置我想同时使用精灵形象的造型就知道如何找到一个图像位置（坐标）。如何找到精灵图像

来源

2009-09-21 ArK

你可以做得更清楚吗，你想以编程方式找到特殊职位吗？或只是添加到CSS的职位？那么测量呢？试验和错误？ – markus 2009-09-21 06:11:44

另一种更简单的方法是通过此网站调用Sprite Cow。我刚刚尝试过，它使事情变得更快。

来源

2012-05-23 15:40:48 Nina

谢谢老师，这非常有帮助。如果你不想安装任何图像编辑软件，这是一个很好的选择。 – vanzylv 2012-11-16 17:18:46

是的！ Sprite Cow是我见过的最棒的精灵坐标工具。 – Slobaum 2012-11-29 21:48:36

真棒工具人。感谢分享 – 2016-03-07 13:38:45

使用Gimp/Photoshop等图形编辑程序，并在写入CSS时写下坐标/位置。

来源

2009-09-21 05:04:11

说“你只需要知道答案”并不是非常有帮助。 – Slobaum 2012-11-29 21:50:47

雪碧牛应该是这个问题上的答案（下） – 2013-06-10 14:34:58

您可以使用tool like this并获取精灵中图标的背景位置。

您需要先上传图片，然后从精灵中选择一个图标。将生成CSS，只需复制生成的CSS并在您的课堂中使用它。

其他选项是

你需要在Photoshop等图像编辑器中打开图像。从那里你可以找到图像中任何地方的X和Y位置。请注意，左上角是0,0。获取x和y的位置并像这样使用

background-position：-310px -123px;

请注意X和Y坐标前的“ - ”号。

开始与

背景位置：1px的1px的;

使用Firebug即时修改数值。通过试验和错误的方法，你可以找到确切的位置。

来源

2013-01-24 02:42:15 kiranvj

MS油漆与选择工具，光标显示的位置点击和选定的尺寸 - 例如：x 266 y 3然后background-position：-266px -3px – Jay 2015-09-21 06:00:08

-3

尝试这个例子帮助我很多，当我第一次尝试sprite东西。

<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>

来源

2015-01-31 19:49:24

我不认为这回答了如何找到像素的问题位置。 – 2015-01-31 20:03:04

我发现了一个惊人的在线工具来生成图像雪碧的CSS代码。

链接：http://GetSpriteXY.com/

它会帮助你在图像像素产生。对我很有用。

来源

2016-04-06 04:40:52

如何找到精灵图像

回答

相关问题