CSS精灵技术及其优化经验分享

由于网速的限制，页面开发者都喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展，网速的提升，大家越来越重视页面的加载速度，页面效率问题，过去的那些小图便成为了前端开发者的眼中钉，因为每加载一张图片都会产生一次浏览器请求数，发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时，图片一个个的零星显示，鼠标经过时候背景闪白等也都是我们不能忍受的。于是乎将页面中的背景图整合到一起，利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位的技术被广泛使用与了页面构建中，这就是CSS Sprites。当然CSS Sprites技术也存在着维护不便，内存占用大等等的缺点。

精灵图（CSS Sprites）就是通过将多个小图片融合到一张图里面，一般是将整张图片先放到一个div盒子里面，然后通过background背景定位技巧来显示需要的图片，盒子的大小决定要显示的图片的面积。

Background：url(“…”) no-repeat 50px 50px;

url是精灵图的地址，no-repeat是图片的显示方式（不重复），两个数据是定位的数据，分别表示左、上的距离