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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值