图片整合(精灵图,雪碧图)

@TOC

一.原理和目的

将一些小图片合并在一个大图上,这个过程就是图片整合.
这样可以减少向服务器请求信息的次数,从而提高浏览器的加载速度,其次也可以减小图片的体积.

二.注意点

1.一定是小图片进行整合

大图片整合没有太大意义

2.需要在图片之间设置空隙

三.精灵图的使用方法

1.直接插入图片

在img外加个盒子,设置和图片相同的宽高;
用margin调整图片在盒子里的位置,使想要留下的图片在盒子内部;
给盒子添加overfiow:hidden隐藏其他的图片.

2.用背景图

设置盒子宽高和图片大小相同 ;
使用background-position调整图片位置.