CSS中的sprites

CSS的sprites（雪碧图，精灵图）          *三个名字都要记住

定义：就是将界面上需要的小的导航按钮图标，小图标整合成一张背景图片

           然后用background-position来实现背景图片的定位

优点：1.通过整合减少图片数量从而减少对服务器的请求次数

           2.整合图片来减少图片体积

 

图片整合的原则：

1. 边切图边整合

2.定位时避免出现bottom，left等属性（因为图片增大时会导致定位位置错误），要用具体的数值来进行定位

3.要给小图标留出走够的空间（防止因为空间过小，其他图片出现在本区域内），一般将小图标放到图片最右侧

4.单张整合好的图片大小应该在100KB以内

5.按照分类来整合图片

6.为了方便计算尺寸，将sprites图的坐标计算成整数倍

7.整合好的图片背景要透明（保存成png或者gif格式）

 

更多专业前端知识，请上 【猿2048】www.mk2048.com