图片精灵快速定位工具-spritecow

2024-05-20 20:25:45

声明

原文内容转载自简书，作者是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图像拼接技术

图片精灵快速定位工具-spritecow相关推荐

微信开发者工具元素快速定位审查元素
一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具并定位到该元素,但在微信开发者工具中不支持, 解决方法点击 elements左边的小鼠标图片,然后在主页面点击元素即可快速 ...
网络故障排除工具 | 快速定位网络故障
网络故障排除对于网络技术专家和网络工程师是颇具挑战的工作.每当添加新的设备或网络发生变更时,新的问题就会出现,而且很难确定问题出在哪里.每一位网络工程师或专家都有自己的经验和必备工具,能让他们快速定位 ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术...
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
三步法助你快速定位网站性能问题
本文分享自华为云社区<在瀑布下用火焰烤饼:三步法助你快速定位网站性能问题>,原文作者:Kagol . 引言性能,是一个问题. 每个项目成长到一定的规模,都几乎必然要遇到性能问题,当遇到性 ...
地图测量面积工具app_【第288期】GPS工具箱(GPS精准定位工具)
影视猫(免费观影,自动播放)一起来看囧妈酷狗短酷--音乐卡点短视频制作神器 [一键卡点] 1.海量热门.经典.原创卡点曲目,丰富旋律任君自选: 2.多段视频.图片素材,帮你智能生成节奏大片,好听还好看 ...
开源集锦（五）开源框架和快速开发工具类
Volley https://github.com/stormzhang/AndroidVolley http://blog.csdn.net/t12x3456/article/details/922 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址
32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址一丶基址,随机基址的理解首先,全局变量的地址,我们都知道是固定的,是在PE文件中有保存的但是高版本有了随机基址,那么要怎么解决这 ...

最新文章

热门文章