精灵图的使用？

雪碧图的使用

相关信息

下图是真实开发中的精灵图

精灵图模板

为什么要使用雪碧图？

1. 为了有效地减少服务器和发送请求的次数，提高页面的加载速度，以及使用图片作为按钮背景时的图片闪烁问题，所以出现了 CSS 精灵技术（也称 CSS Sprites 、CSS 雪碧图）
2. 因为网页中的每一张图片都要去请求一次服务器，如果将网页的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了。

雪碧图的使用方式

1. 只需要测量出需要使用的图标的大小和位置即可
2. 一般都是将素材图往上或左移动，所以 background-position 的值一般都是 0 或负值

雪碧图的测量方式

使用 PS 等工具测量

注意：在 PS 中缩小的精灵图不要保存

移动端精灵图倍图的使用步骤

移动端大多采用多倍图，如果直接使用会造成图片模糊失真

1. 使用 PS 打开精灵图，将图片缩放两倍大小
   

2. 使用选框工具选中我们需要的图标，查看图标的宽、高和 x、y 轴
   

3. 编写代码

/* 图标的宽度 */
width: 23px;
/* 图标的高度 */
height: 23px;
/* 添加背景图标，以及背景图标的x轴和y轴，注意：都是负数 */
background: url(../img/sprite.png) no-repeat -59px -194px;
/* 将背景图标width缩放至两倍大小，height会自适应缩放 */
background-size: 104px;

4. 图标正常显示

4128a213ce804aab8283f92552d0409b

精灵图的缺点

1. 图片文件比较大
2. 图片本身放大或缩小会失真
3. 图片制作完成后期更换比较复杂