哈喽！作为一名web前端初学者的我也来蹭下热度，通过我对这门技术的了解来给你们分享一下我学到的东西。
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，那么什么是雪碧图呢？接下来我给大家解释一下。
雪碧图也叫CSS精灵， 是一种CSS图像合成技术；
通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用需要配合background-position来获取。如下：
这是一张雪碧图。
使用雪碧图的优点有以下几点：
1.将多张图片合并到一张图片中，可以减小图片的总大小。
2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
如何生成雪碧图？
这个有很多软件可以使用，我使用的是Firework。首先新建文件夹，宽度一般为100像素，高度可以根据图片的大小来设定，画布颜色为透明色，点击确定。再返回图片，点击裁剪工具，再点击指针工具，Ctrl+c复制，Ctrl+v粘贴。
如何使用雪碧图？
1.确定在哪里引入精灵图，并为其设置大小。
2.在样式CSS中插入背景图，background-image:url("");
3.利用background-position：x y;属性和background-size：cover；background-repeat：no-repeat;等属性的组合进行定位。
在使用精灵图过程中你可能会遇到以下问题：
雪碧图太大了，放到指定位置只能显示一部分！
两个解决方法：1.上传雪碧图时就按照你需要的大小上传
2.使用background-size: 属性缩放整块背景图，这里要注意下缩放了背景图的大小，对应的background-position也要同比例缩放。
好了就先了解到这吧，祝你们学习愉快晚安。
