CSS精灵图技术（提高页面的加载速度）
时间：2023-07-06 15:30:02 | 来源：网站运营
时间：2023-07-06 15:30:02 来源：网站运营
CSS精灵图技术（提高页面的加载速度）：未来2088 2019-11-28 18:00:00
哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
第二阶段 CSS318 CSS精灵技术1 CSS精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户，然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称 CSS Sprites、CSS雪碧）。
2 CSS精灵技术的本质简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为京东网站中的一个精灵图。
3 CSS精灵技术的使用CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的 background- Image、 background- repeat和 background- position属性进行背景定位，其中最关键的是使用 background-position，属性精确地定位。
No-repeat 不平铺 ，横坐标x为0 ，纵坐标y为-100，
4 拼出自己的名字5 王者荣导航栏找到一个较小的图片背景，open in new tab 可以查看到精灵图
6 PS制作精灵图CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。插入的大图片不能往上放
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。
7 运用制作精灵图Ps确定xy轴和宽高
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习
在线咨询
