23

我想知道如何在使用精灵图像进行造型时找到图像位置(坐标) 。

4

5 回答 5

58

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

于 2012-05-23T15:40:48.157 回答
5

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

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

在此处输入图像描述

在此处输入图像描述

其他选项是

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

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

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

  1. 从...开始

    背景位置:1px 1px;

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

于 2013-01-24T02:42:15.583 回答
2

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

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

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

于 2016-04-06T04:40:52.603 回答
-2

使用图形编辑程序(例如 Gimp/Photoshop)并在编写 CSS 时记下坐标/位置。

于 2009-09-21T05:04:11.927 回答
-4

当我第一次尝试精灵的东西时,试试这个例子对我有很大帮助。

<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-31T19:49:24.077 回答