前端图片整合/雪碧图/精灵图用法

图片整合（CSS Sprites）

又叫css精灵 / 雪碧图

原理：

图片整合技术是把小图标整合成一张大的背景图片，
通过插入背景图和background-­position调整图片的位置来显示图片

优点:

1、减少服务器的请求次数，提升网页的加载速度，减少服务器的带宽
2、减小图片的体积

缺点:

不利于后期的维护

整合代码示例：

<style>
	*{
   margin:0;padding:0;}
	.wrap{
   
	    width:400px