CSS精灵图

CSS的精灵图又称为雪碧图

英文为sprite，精灵图的做法就是把众多的小图标整合为一个图片，通过background-position属性分别指定使用图片中的哪个图标。

优点就是：HTML页面外部资源请求减少，对内存和带宽更加友好。
精灵图对于前端基本没有难度，只要找准定位就能实现。

div{
	background-image:url("image.png");
	background-position:0 -90px;
	/*或者
	background:url(img_sprites.gif) 0 0;
	*/
	width:200px;
	height:100px;
	
}

<div></div>