雪碧图（精灵图）

雪碧图（精灵图 sprite）

背景图定位技术（重要），属于网站优化的一部分

特点：

*通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度
*把N多个小图标放到一张大图上去
*通过整合图片来减少图片的体积
*使用 **background**属性
	*例如：background: #ccc url('/icon.png') no-repeat 0 -200px

first: 先写一个宽高色块（要定位图片的宽高）。x轴向右为负，y轴向下为负（比如例子中-200px就是y轴向下200px）

second：粮区需要选取的图片左上角 距离这个大图的x坐标，y坐标（宽高）

third: 如果你想让你的图片往上走就是负值，往左走也是负值

-----------------------------分割线-------------------------------

----------------补充背景属性 background--------------

background-color: red (等于 background:red)

background-image: url() 填充背景图片

background-repeat: no-repeat(不平铺)

*repeat-x: x轴平铺
repeaat-y: y轴平铺

background-position: 值1(x轴) 值2(y轴)

*值1：left / center / right  或者 像素（正负）
值2： top / center / bottom 或者 像素（正负）