推荐一个在线的icon图片合成工具（CSS Sprite）

作为一枚前端coder，拿到设计稿时便已构思好了这个页面的布局，要用到的元素，UI该怎么切图，怎么实现性能最优，这些都是一个前端在coding中必须把控好的原则。
前端性能优化有很多入口，如今一些网站丰富多彩，绚丽夺目，图片元素占了很大一部分比例，所以处理好图片的加载、减少网络请求是非常有必要的，CSS Sprite就是一种方式。
CSS Sprite（css精灵），就是将一些零星图片（一般多用于icon）都包含到一张大图中去，通过CSS的“background- size”，“background-position”的组合进行背景定位，background-position可以定位出所需要小图的位置，从而达到展示图片的效果。

CSS Sprite的优点：
1.减少网页的http请求，提高页面的性能
2.能减少图片的字节，多张图片合并成1张图片的字节总是小于多张图片的字节总和的
3.减少命名的困扰，一张图片命名解决n张图片的命名。虽然这是一个小事情，但是对于爱纠结和选择困难症的coder来说总是在命名上耗费不少时间呢
4.对于一个项目维护来说图片一目了然，很清晰

CSS Sprite的缺点
1.如果在项目维护工程中部分图片有更改，最好事先在小图之间留下足够的空白，这样后面只需改动要修改的图片，其他的图片坐标互不影响
2.将所有的小图合在一起需要耗费时间，但是今天就是给大家推荐一款在线合成的网站，无需ps，只需要选中要上传的图片点击上传即可
网址：https://www.toptal.com/developers/css/sprite-generator
效果如下：

左侧的padding设置是小图之间间距，可自由设置，右侧是设置最后生成图片的排列方式，下面所有小图的宽高以及位置都显示出来了，接下来只需要到css里设置就好啦。

这里要注意的一点是，假设是移动端750*1334的设计稿，那么我们在处理一个70*70大小的图片时，需要设置图片的实际宽高是35*35，那么这个时候设置background-size就应该是生成的图片大小除以2，background-position也是现有标注的位置除以2，这样取到的图片才会正常且完整地显示为35*35的图片。

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

推荐一个在线的icon图片合成工具（CSS Sprite）相关推荐

推荐一个在线全自动智能图片背景扣除工具，效果杠杠的
https://www.remove.bg/zh 往期精品(点击图片直达文字对应教程) 机器学习后台回复"生信宝典福利第一波"或点击阅读原文获取教程合集
推荐一个在线json数据格式化网站
json数据非常友好方便的处理: 推荐一个在线json数据格式化网站 http://json.parser.online.fr/ 转载于:https://www.cnblogs.com/cocoaji ...
推荐一个在线创作流程图、思维导图软件—ProcessOn
转载自推荐一个在线创作流程图.思维导图软件-ProcessOn 最近要画流程图,破解了半天Visio2016没搞定,2016的估计都被封了,Visio收费又过贵,又不想折腾低版本的破解,所以找了个在 ...
推荐一个在线查看函数图象的网站 —— Desmos
推荐一个在线查看函数图象的网站 -- Desmos ,挺有用的,收藏一下.
php背单词网站,韩语干货｜推荐一个在线背单词炒鸡nice的网站!
原标题:韩语干货|推荐一个在线背单词炒鸡nice的网站! 今儿分享就是这个「轻松背单词」!大概是我之前备考的时候收藏的,背了一整级的单词,最近换电脑导收藏夹的时候找回了它. 其实背单词软件很多,我也看 ...
推荐一个在线编程的网站
推荐一个在线编程的网站:http://www.anycodes.cn/zh/ 用过其他的网站,没有这个好用,有的网站会出现点击编译后没有运行情况.
推荐一个在线编程学习网站“泡面吧”
最近看到一个在线编程学习网站,觉得比较好,就推荐下给大家,下面是它的简介: 泡面吧是面向中文用户的在线计算教育平台,采用伴随式教育的概念,让用户可以像泡面一样更高效.更主动的进行学习.泡面吧以练即是学 ...
python 在线预览文件_用Python PyQt写一个在线预览图片的GUI
在爬完网上一篇帖子,并得到其中的所有图片链接后,写一个GUI来实现在线预览是一个很自然的想法, 相当于实现一个python版的图片浏览器, 通过这个练习,可以让我们更熟悉PyQt这个库. 这里我用的是 ...
html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具
Css Sprite,有时也称为雪碧图.精灵图,是每一个前端开都会遇到的问题,也是常见的小图片加载优化手段.相信各位同学都清楚其原理,具体就不赘述了. 之前一直有动机利用html5实现一个合成雪碧图的 ...
推荐一个好用的图片压缩网站！清晰度不变的同时体积减小一大半
这是「进击的Coder」的第 635 篇技术分享作者:崔庆才我们肯定经常跟图片打交道吧,不管是写文章.传图片还是网站开发,我们或多或少都要插图,但有时候图片体积比较大的时候就会带来加载速度慢的一些 ...

推荐一个在线的icon图片合成工具（CSS Sprite）

推荐一个在线的icon图片合成工具（CSS Sprite）相关推荐

最新文章

热门文章