CSS3的精灵技术

目录

一、精灵技术的本质

二、制作精灵图：用ps制作

三、如何使用

---

一、精灵技术的本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）。
原文链接：https://blog.csdn.net/qq_38496329/article/details/106933399

二、制作精灵图：用ps制作

制作原则：

1）精灵图上放置的都是小的装饰性质的背景图片，插入图片不能往上放
 2）精灵图的宽度取决于最宽的那个背景图
3）可以横向摆放，也可以纵向摆放 但是每个图片之间至少隔开偶数像素合适
4）在精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图

三、如何使用

要想精确定位到精灵图中的某个小图，就需要使用到CSS的background,background-position:背景图调整图片定位（往上走是负的）