学习前端第七天笔记记录——精灵技术

19）精灵技术
一、为什么需要精灵技术
1、目的：为了有效地减少服务器的接受和发送请求的次数，提高页面的加载速度
2、核心原理：将网页中的一些小背景图像整合到一张大的图片中，这样服务器就只需要请求一次就可以了

二、精灵图的使用
1、使用的核心：· 主要针对背景图片的使用。就是把多个小背景图片整合到一张大图片中
                         · 这个大图片也称为sprites 精灵图或者雪碧图
                         · 使用精灵图就是移动精灵图的位置，此时就要使用background-position。将精灵图插入后盒子中后再移动他的位置
                         · 移动的距离就是这个目标图片的x和y坐标。注意，网页中x轴向右为正方向，y轴向下为正方向
                         · 因为一般情况下是往上往左移，所以数值是负数
                         · 使用精灵图的时候需要精确测量每个小背景图片的大小和位置