精灵图

为什么需要精灵图

网页中往往有许多需要图片作为背景，当网页中图片资源过多，服务器就会频繁的接受和发送请求图片。造成服务器请求压力过大，大大降低页面加载速度。

TIP

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

核心原理 : 将网页中的一些小背景图像整合在一张大图中，这样服务器就只需要请求一次就可以了。

精灵图的使用

• 使用 `background-position` 移动图片位置。

background-image: url(./image/css-sprites.png);
background-position:-100px -100px

优点

• （1）减少网页的 http 请求，从而大大的提高页面的性能
• （2）图片命名上的困扰
• （3）更换风格方便

缺点

（1）必须要限定容器大小符合背景图元素位置，需要计算