CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
举个应用的实例：
实现原理：CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
优点：
（1）减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
（2）提高页面的加载速度
sprite技术的其中一个好处是图片的加载时间（在有许多sprite时，单张图片的加载时间）。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。因此，单独的一张JPEG或者PNG sprite在大小上非常可能比把一张图片分成多张得来的图片总尺寸小。
应用实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>雪碧图实现原理</title>
</head>
<style>ul,h3{margin: 0;padding: 0;}h3{display: block;margin: 0;padding: 0;}.cat{position: relative;width: 150px;background-color: #f8f8f8;border: 1px solid #bbb;}li{z-index: 2;position: relative;display: block;height: 31px;line-height: 31px;overflow: hidden;margin: 1px 10px 0;vertical-align: bottom;border-bottom: 1px solid #dedede}li:hover{background-color:#666666;}li h3{font-size: 13px;font-weight: 400;}li i{display: inline;float:left;margin: 3px 10px 0 0;height: 24px;width: 30px}/* 在这里补充雪碧图的样式 */li>i{background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');}.cat-2>i{background-position:0 -24px;}.cat-3>i{background-position:0 -48px;}.cat-4>i{background-position:0 -72px;}.cat-5>i{background-position:0 -96px;}.cat-6>i{background-position:0 -120px;}.cat-7>i{background-position:0 -144px;}.cat-8>i{background-position:0 -168px;}
</style>
<body>
<div class="cat"><ul><li class="cat-1"><i></i><h3>服装内衣</h3></li><li class="cat-2"><i></i><h3>鞋包配饰</h3></li><li class="cat-3"><i></i><h3>运动户外</h3></li><li class="cat-4"><i></i><h3>珠宝手表</h3></li><li class="cat-5"><i></i><h3>手机数码</h3></li><li class="cat-6"><i></i><h3>家电办公</h3></li><li class="cat-7"><i></i><h3>护肤彩妆</h3></li><li class="cat-8"><i></i><h3>母婴用品</h3></li></ul>
</div>
</body>
</html>
