前端是接近用户体验的一个项目组成部分，合适的优化能够大大减少网页响应时间，合理的资源加载自然成为了工作中的要务，现在就结合实例讲解到底什么是css雪碧图，以及工作中的实际应用。
一 、为什么需要使用雪碧图
比方说现在经理要我们给页面添加一个侧边任务栏，效果如下： 
呵呵，作为一名资（too）深（young）的前端，我刷刷刷为页面增加ul还有几个然后再给每个li添加背景图片，哈哈，任务就这么完成了，然后commit了一下自己的代码。此处应该要有代码
html部分
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧图实例</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <ul class="function"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>- css部分
* {
box-sizing: border-box;
padding: 0; margin: 0; } body { font-size: 18px; } .function { list-style: none; display: inline-block; } .function li { width: 40px; height: 40px; margin-bottom: 5px; background: #E0E0E0; background-repeat: no-repeat; } .function li:nth-child(1) { background-image: url(../img/all.png); } .function li:nth-child(2) { background-image: url(../img/back.png); } .function li:nth-child(3) { background-image: url(../img/cart.png); } .function li:nth-child(4) { background-image: url(../img/Category.png); } .function li:nth-child(5) { background-image: url(../img/close.png); } 但是等到项目上线的时候，经理说小徐啊，这网页响应有点慢啊！怎么可能！于是我打开chrome按下F12查看network
我们可以看到这里有几张不到1k的小图片就这点大小还占用了5个请求，网页响应变慢了也不难理解。于是这时候css雪碧图就出现！
二、CSS雪碧图原理及应用
原理：把小图标合成一张大图，通过给元素的公共css设置background-image为该合成图，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图，然后再给每个元素单独微调其background-position。把多个请求合并成一个。
步骤：
-
合并图片
首先我们要对图片进行合并，方式有很多种，可以通过gulp，webpack等构建工具或者一些在线工具，这里提供一个很好用的在线的图片合并网站
http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css -
设置css（此处必须有代码）
* {
box-sizing: border-box;
padding: 0; margin: 0; } body { font-size: 18px; } .function { list-style: none; display: inline-block; } .function li { width: 33px; height: 33px; margin-bottom: 5px; background: #E0E0E0; background-image: url(../img/result.png); /*result.png为合并后的图片*/ background-repeat: no-repeat; } .function li:nth-child(1) { background-position: 0 0; } .function li:nth-child(2) { background-position: 0 -35px; } .function li:nth-child(3) { background-position: 0 -72px; } .function li:nth-child(4) { background-position: 0 -110px; } .function li:nth-child(5) { background-position: 0 -145px; } - 效果： 这时候我们再打开chrome的network查看请求数
有没有发现呢？原本的5个图片请求变成了1个。这时候我们可以再次自信的跟经理说，问题解决啦！
