5.1 为什么需要精灵技术
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
我们为什么需要精灵技术：
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
5.2 精灵技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的
- background-image、
- background-repeat
- background-position属性进行背景定位，
- 其中最关键的是使用background-position 属性精确地定位。
5.3 精灵技术使用的核心总结
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
5.4 制作精灵图(了解)
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
float: left;
background: url(images/abcd.jpg) no-repeat;
}
.p {
92px;
height: 108px;
background-position: -497px -278px;
}
.i {
62px;
height: 106px;
background-position: -326px -142px;
}
.n {
112px;
height: 113px;
background-position: -255px -274px;
}
.k {
104px;
height: 111px;
background-position: -496px -142px;
}
</style>
</head>
<body>
pink
<div class="p"></div>
<div class="i"></div>
<div class="n"></div>
<div class="k"></div>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8pTrMCy-1576419566317)(C:UsersasusAppDataRoamingTypora ypora-user-imagesimage-20191215184154728.png)]](https://img-blog.csdnimg.cn/20191215222036813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3BvbHVuemk=,size_16,color_FFFFFF,t_70)