CSS精灵图解析案例

HTML精灵图

CSS精灵可以有效的减少服务器接收和发送请求的次数，提高页面的加载速度。
精灵图主要针对于背景图片的使用，把多个小背景放在一个大的背景图片中，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图片即可全部展示出来。

CSS精灵图就是移动背景图片的位置，属性：

background-position: x坐标 y坐标；

移动图片的位置向左或者向上移动，精灵图的移动如下图:

图片向左或者向上移动，值一般为负值。
如下所示:

找到字母O在精灵图中的位置,然后在html页面进行定位。

X轴坐标和Y轴坐标均为负数。