精灵图#

为什么需要精灵图？#

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

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

核心原理#

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

优缺点#

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

使用#

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