前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Sprite 从PS切图到具体实现完整过程

Sprite 从PS切图到具体实现完整过程

作者头像
从入门到进错门
发布2018-08-21 16:20:23
8410
发布2018-08-21 16:20:23
举报
文章被收录于专栏:前端菜鸟变老鸟

CSS雪碧图(sprite)是一种网页图片非常高效的处理方式,它是将页面中包含的零星图片利用PS制作到一张大图中,再结合background-position属性进行定位的的方式实现。 它的优点有以下方面: 1.      减少http请求次数。 2.      减少图片字节数(很多人有疑问为什么合在一起还会降低字节数,图片明明变大了。原因是这样的:每个图片都是有固定的格式的,包括图像头、版本号、appo块等等,这些属性都会占一定的字节数。因此合在一起回降低字节数)。 缺点:维护成本增加,比如要修改或增加一个图标需要修改整张sprite图。 解决这一缺点的方法是:增加图标摆放的间隙。根据图片大小一般留20-40px的间隙。 图片合并的基本原则: 1.     色彩相近的合在一起 2.     大小相近的合在一起 3.     属于同一页面的合在一起 4.     有点击或hover状态改变的图标放在一起 具体实现: 一、PS切图: 首先合并图层,然后使用举行选框工具选出需要切出的图标,接着使用魔棒工具+Alt去除多余的部分。最后保存到新建的图层。我这里使用的是Adobe公司的部分软件logo得到的结果如下:

二、CSS布局: HTML:使用ul_li标签布局

CSS:加上一些CSS属性之后

CSS before选择器:在被选元素的内容前面插入内容。 使用before选择器,为每个li标签加上background-position属性之后:

详细解读:以PS为例。 .ps:before{ background-position:-45px-21px; } 其中background-position的第一个值表示PS图标左边距离整张sprite图左边的距离,第二个值表示PS图标上边距离整张sprite图上边的距离。直接上图:

但是我们看见实际运用的时候的值是负数,这就相当于把整张sprite往左边移动45px,往上移动21px。这些值可以用PS直接测量出来。 最后附上demo源码下载地址:https://github.com/usecodelee/sprite

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年10月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档