CSS的sprites(雪碧图,精灵图) *三个名字都要记住
定义:就是将界面上需要的小的导航按钮图标,小图标整合成一张背景图片
然后用background-position来实现背景图片的定位
优点:1.通过整合减少图片数量从而减少对服务器的请求次数
2.整合图片来减少图片体积
图片整合的原则:
1. 边切图边整合
2.定位时避免出现bottom,left等属性(因为图片增大时会导致定位位置错误),要用具体的数值来进行定位
3.要给小图标留出走够的空间(防止因为空间过小,其他图片出现在本区域内),一般将小图标放到图片最右侧
4.单张整合好的图片大小应该在100KB以内
5.按照分类来整合图片
6.为了方便计算尺寸,将sprites图的坐标计算成整数倍
7.整合好的图片背景要透明(保存成png或者gif格式)