精灵图

为什么需要精灵图？

• 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

• 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites、CSS雪碧）

核心原理

• 项目中将多张小图片，合并成一张大图片，这样服务器只需要一次请求就可以了，这张大图片称之为精灵图

优缺点

• 优点：
  • 减少服务器发送次数，减轻服务器的压力，提高页面加载速度。
• 缺点：
  • 整合图片过程繁琐--UI完成

使用

• 主要借助背景位置来实现---background-position
• 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）