比起CSS雪碧俺更喜欢可乐，好，废话少说，上正题！
按度娘百科的解释CSS雪碧就是酱紫滴：
把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
比如：
<body>
<p>1234567890-123456789</p>
</body>
然后CSS里酱紫滴
p{
background-image:url(css.png);
background-repeat:no-repeat;
background-position:0 -450px; width: 400px; height: 400px; }
我们把CSS里的p{}改一下
p{
background-image:url(css.png);
background-repeat:no-repeat;
background-position:0 0; width: 400px; height: 400px;}
上css.png图片，就是CSS拼合后的图片
.sprite-01{ background-position: 0 0; width: 400px; height: 400px; }
.sprite-02{ background-position: 0 -450px; width: 400px; height: 400px; }
.sprite-03{ background-position: 0 -900px; width: 400px; height: 400px; }
.sprite-logo{ background-position: 0 -1350px; width: 600px; height: 600px; }
从上至下每个图片的css 雪碧的“坐标”
这里留一个CSS sprite 在线生成的地址
CSS 图片拼合生成器