精灵的制作方法

同学你好，制作精灵图时，首先要将多个小图标合并到一张图片上，可参考如下制作（一般精灵图片是设计师制作，不需要自己制作）：

第一步：打开Photoshop软件，点击左上角“文件”按钮，弹出下拉框，选择“新建”点击进入

第二步：点击“新建”后弹出下面对话框，在红色框内填入你想新建的画布大小宽度，最后点击“确定”按钮即可创建出一个画布（尺寸可按照所有小图标总的大小而定）

第三步：将每个小图标在画布中按照顺序排列放置，即可制作成一个精灵图。

其次，在css代码中使用background-position属性单独显示其中一个，关键在于确定小图标在当前精灵图片中的位置，位置确定方法参考如下：

第一步：选择工具栏中的切片工具

第二步：使用切片工具将需要显示的小图标框住

第三步：双击框住的小图标，即可弹出如下弹框，弹框中有当前小图标的位置信息（水平为X,垂直为Y）

第四步：在css代码中实现

​

祝学习愉快！