Web前端，CSS精灵图的使用

前言

持续学习总结输出中，今天分享的是Web前端，CSS精灵图的使用

---

精灵图的介绍

在我们日常的项目开发中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

例如:需要在网页中展示8张小图片
• 8张小图片分别发送 → 需要发送8次
• 合成一张精灵图发送 → 只需要发送1次

在我们页面中看到的每张图片都是先由浏览器发送请求，然后服务器接受请求这些请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。在这种情况下精灵图就诞生了，使用将图片整合在一起技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

精灵图的优点是什么?
• 减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用步骤

1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y

精灵图的显示主要借助于背景位置来实现

background-image和background-position

background-image：url（引入图片的路径）；可以引入多张图，用逗号隔开即可。

background-position：x y；x和y是x轴上的偏移值，y是y轴上的偏移值

还可以配合background-repeat和background-size进行精确把控。

总结

精灵图主要针对什么图片使用？
小的背景图片

精灵图的优点是什么?
• 减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用精灵图的步骤是什么?

1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y

精灵图的显示主要借助什么来实现？
background-position:x y;一般情况下精灵图都是负值。轴右边是正值，左边是负值，y轴也是和x轴一样的原理。

最后分享一句话：

给自己一点时间，别害怕重新开始。
《不抱怨的世界》

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！！