如何从精灵图像中找到图像的像素位置

ArK*_*ArK 17 css sprite

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

Nin*_*ina 52

另一种更简单的方法是通过这个名为Sprite Cow的网站.我最近刚尝试过,它让事情变得更快.


kir*_*nvj 5

您可以使用这样的工具并获取精灵中图标的背景位置。

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

在此处输入图片说明

在此处输入图片说明

其他选项是

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

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

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

  1. 从...开始

    背景位置:1px 1px;

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