如何从精灵图像中找到图像的像素位置[关闭]

Posted

技术标签:

【中文标题】如何从精灵图像中找到图像的像素位置[关闭]【英文标题】:how to find pixel position of image from sprite image [closed] 【发布时间】:2010-11-29 23:48:29 【问题描述】:

我想知道如何在使用 sprite image 进行样式设置时找到图像位置(坐标)。

【问题讨论】:

您能否说得更清楚些,您想以编程方式查找特殊职位吗?或者只是添加到css的位置?在那种情况下,测量呢?反复试验? 【参考方案1】:

另一种更简单的方法是通过这个名为Sprite Cow 的网站。我最近才尝试过,它使事情进展得更快。

【讨论】:

谢谢您,女士,这很有帮助。如果您不想安装任何图像编辑软件,这是一个不错的选择。 是的! Sprite Cow 是我见过的最棒的精灵坐标工具。【参考方案2】:

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

您需要先上传图片,然后从精灵中选择一个图标。将生成 CSS,只需复制生成的 CSS 并在您的课程中使用它。 (免责声明:我以前做过这个)

其他选项是

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

    背景位置:-310px -123px;

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

    开始

    背景位置:1px 1px;

使用 Firebug 即时修改值。通过试错法,您可以找到准确的位置。

【讨论】:

MS 使用选择工具绘制,光标显示点击的位置和选择的尺寸 - 例如:x 266 y 3 然后背景位置:-266px -3px【参考方案3】:

我找到了一个很棒的在线工具来生成 Sprite 图像 CSS 代码。

链接:https://getspritexy.netlify.com/

它将帮助您生成图像像素。对我很有用。

【讨论】:

【参考方案4】:

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

【讨论】:

说“你只需要已经知道答案”并不是很有帮助。 雪碧牛应该是这个(下)的答案【参考方案5】:

当我第一次尝试 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>

【讨论】:

我不认为这回答了如何找到像素位置的问题。

以上是关于如何从精灵图像中找到图像的像素位置[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

SKSpriteNode - 如何写入构成精灵图像的像素?

CSS3 - 在精灵图像的“背景位置”之间淡入淡出

PNG的精灵动画[颤振]

分解精灵图像的简单工具? [关闭]

CSS 剪辑 - 精灵图像

精灵与单个图像