内卷是一个很痛苦的事情，所以球球各位不要再内卷我了！！！
前言
在开发中难免避免不了的一个问题，就是服务器经常性的请求图片地址，这样很容易导致我们的浏览器在加载的时候，会大幅度重新请求导致数据请求卡顿，同时对服务器会造成压力，在这有一个方法它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来，当访问该页面时，就由原来的多次请求变为一次请求。多种图片集合成一张图片上去切图到自己想使用的图片，所以页面中如果有多个icon（小图标）时所以我们经常把这种图片叫做“精灵图”，同时也是我们最常用的一种web前端编程手段。
一、精灵图是什么？
概念 css sprite也叫精灵图or雪碧图,是一种网页图片应用处理方式。 它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。
二、使用步骤
1.引入icon精灵图
代码如下（示例）：
.pt{
background-image: url(./search.png) ; /*引入图片*/
}
2.对精灵图进行切图
代码如下（示例）：
.pt{
background-size: 15px; /*设置引入的背景图片大小，给定大小将精灵图的小logo限制住*/
}
3.防止精灵图按照坐标轴重叠出现
.pt{
background-repeat: no-repeat; /*防止图片按照坐标轴进行重叠*/
}
4.精灵图的坐标轴
.pt{
background-position:/* 第一个值X轴方向的坐标 第二个值Y轴方向的坐标 */ ;
/* 坐标的值可以为负数，只不过坐标轴的起点会朝着所对应的轴坐标反方向进行移动 */
}
总结
精灵图的优点固然有很多种，通过将多种icon图片放置到同一张照片中使用通过background-img引入背景图，再通过background-position将背景图移动到需要的位置同时也可以切图寻找自己需要的精灵图，这种方法大大减少了浏览器对于多样式的图片重复乏味的请求回调数据的请求，虽不是回调地狱，但这么大量性的重复请求操作，也算是个请求地狱了，所以精灵图这种创新意义式的发现对于前端人员来说是个蛮不错的福音。
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
