精灵图

概念

困扰

解决网页中小图像过多而引起的向服务器频繁接收和发送请求图片，造成服务器请求压力过大，降低页面加载速度的问题。

方案

因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术。

原理

• 将网页中的一些小背景图像整合到一张大图里，服务器只用请求一次
• 这种图片称为雪碧图或者精灵图
• 移动背景图片位置，此时可以使用background-position
• 移动的距离就是这个目标的x和y坐标。注意网页中的坐标有所不同
• 一般情况下都是往上往左移动，所以数值都是负值

场景

网页小背景图片多，服务器请求小图片次数过多

用法

• 精灵图主要针对小的背景图片使用
• 主要借助于背景位置来实现 -- background-position
• 一般情况下精灵图都是负值

案例

image.png