声明

原文内容转载自简书，作者是squidbrother，链接地址是: https://www.jianshu.com/p/eb3e505238d1

前言

最近在练习做NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章的3.8-使用精灵图片(sprite)时，视频里面使用了一款在线的图片精灵快速定位工具spritecow，其官方网址为：https://www.spritecow.com,可以通过上传精灵整体图片获取背景图中某个精灵的background-size，width，height,background-position等信息。
精灵牛(Sprite Cow)是一款非常强大的Css Sprite工具，可帮助你获取雪碧图在背景图内部的位置(background-position), 宽(width)、高(height)，并生成一个便于复制的css样式，直接用鼠标划一划就可以获取起sprite 的坐标，异常方便。精灵图在游戏编程中很常见，以前学习Cocos2d-x游戏引擎的时候就有精灵的概念。

如下图所示：

官方地址

https://www.spritecow.com

使用步骤

1.上传sprite图片

2.设置缩放比例

由于苹果retina屏的关系，为了保证图片不失帧模糊，需要通常2倍的设计图
以iphone6为例
通常手机需要375px宽度设计图
而iphone需要750px宽度设计图
采用压缩宽度，提高图片呈现精细度
具体操作：

• 2-1.
  background-size:375px auto
  再将具体的px,转换为body的font-size比例的rem
  background-size:xxx rem auto

• 2-2. 设置工具的缩放比，同样式中background-size中的比例，保持一致

下面是在MAC电脑中的使用截图，如下图：

下面是我使用Windows10系统，Google的Chorme浏览器打开https://www.spritecow.com官网，上传一张王者荣耀的图片后，选取爆料站那个精灵图片的截图，如下图所示：

3.在工具官网，圈选（模糊圈选，会有像素套索，不必精确）工作区，需要定位的图标

将background-position、width、height依次获取，转换为对应的rem，贴入自己的项目css

4.为了方便px与rem快速切换，在Vscode中，可以搜索并安装 px to rem；

通过安装后，插件的设置，填写基础font-size大小，在css样式表文件中，通过光标选择与键盘alt+z对px或rem,进行快速切换

相关资料

• http://www.spritecow.com/
• 图片精灵快速定位工具
• spritecow改造
• css sprite图像拼接技术