什么是精灵图？如何使用精灵图

精灵图可以叫雪碧图也叫css sprites

一. 精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧。它适合：一般小图标素材。

二.优缺点

优势：
加快网页加载速度
浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
后期维护简单
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用
缺点：
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

那么如何使用呢，今天我就来教大家。

首先用div建立几个盒子来存放精灵图（记住精灵图是重复使用的）如下：

html代码：

<div style="display: flex; flex-direction: row;">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
    </div>

css代码：

.a,.b,.c,.d,.e,.f{
  width: 85px;
  height: 100px;
  background: burlywood;
  background-image: url('@/assets/精灵图.png');
  margin-left: 20px;
}
.a {
  background-position: -25px -80px;
}
.b {
  
  background-position: -115px -80px;
}
.c {
  background-position: -205px -80px;
}
.d {
  background-position: -25px -180px;
}
.e {
  background-position: -115px -180px;
}
.f {
  background-position: -205px -180px;
}

那么来看看完整的效果图吧！

用到的精灵图如下：
总结：通过css定位图片位置使多个div来显示对应的图片，页面显示时，只加载一张图片，从而加快渲染速度，也是css优化的一个点。

感谢观看，有帮助的话点点赞点点关注谢谢哈。