那么，平时如何使用雪碧图呢？
.img{background:url(../images/img.png) no-repeat;} .my-head{height:160px;width:120px;background-position:0 0;} .my-picture{height:292px;width:1253px;background-position:0 -160px;} 复制代码 @mixin img{background:url(../images/img.png) no-repeat; } @mixin my-head{height:160px;width:120px;background-position: 0 0;} @mixin my-picture{height:292px;width:1253px;background-position: 0 -160px;} 复制代码如上面代码所示，现在网上有非常多的雪碧图制作工具，我们只需要将小图发到工具上去，就可以生成大图，同时获得它的 css/sass 代码，而不需要自己一个一个定位。
这是 Windows 版本的工具，网上有很多雪碧图/精灵图制作工具，这里就不推荐本人使用的了。
MDN 定义：图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。
四 总结至此，我们对图片的介绍就结束了，在这里我们列个表进行汇总：
格式使用场景
JPG/JPEG
1. 大的背景图； 2. 轮播图； 3. Banner 图
PNG
1. 小 Logo； 2. 透明背景
GIF
动态图片
SVG
能适应不同设备且画质不能损坏的图片
Base64
大小不超过 2KB，且更新率低的图片
雪碧图
小图太多的时候，集中成一张图片减少 HTTP 请求