刚开始认真学习CSS的时候，发现一个CSS Sprites教程。后来群里的朋友问起这个问题，我很想把那个教程发给他看看，但是已经找不到了，所以就一直想自己写个CSS Sprites教程。这几天写网页的时候恰巧用到了CSS Sprites，就写出来，分享给各位刚学习CSS的新手，相信你看懂了这个，理解和使用CSS Sprites就不成问题了。
首先解释下CSS Sprites是什么：国内有称CSS精灵，有称CSS雪碧的，不管叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，从而达到提升网站加载速度，对开发前段的朋友是必备技能。更详细的解释请点【百度百科】围观。
首先看个例子，里面虽然两个列表样子一样，但是用的显示图片的代码是不一样的。示例：DEMO
如果你是第一次打开这个示例，肯定左边的列表图片是一张一张的显示，右边的列表图片是一起显示，这就是http请求。一张图片就是一个http请求，如果一个网页上面有几百张图片，比如说淘宝首页，那么将会是几百个http请求。再加上同时有很多游客会访问淘宝，这会导致服务器反应速度下降，甚至崩溃。这个时候，CSS Sprites就有很好的表现机会了，他能把不会经常变动的小图标集中到一张图片上，不但减少http请求，而且还降低了图片的大小，加快图片的加载速度。下面是我查看的十张小图的大小：
下面是经过合并成一张图片的大小：
相信大家能清楚的看见相隔有多少倍（不过我不知道是比较“大小”还是比较“占用空间”，不管是哪项，都小了许多）。但是你回头看看上面的DEMO，两个列表里面的图片效果是一样的，并不存在失真的情况，所以大型网站都会运用到CSS Sprites这项技术。
那么CSS Sprites的原理是什么呢？其实就是background-position在起作用。CSS中文手册里面这样解释background-position：设置或检索对象的背景图像位置。说白了，就是定义图片在页面里显示的具体位置，用坐标标注。那么，这个坐标又如何算了？下面有个很好的例子，相信你看了，就会懂的：DEMO
页面里有7个100*100的div，定义的background-position值为：
.d1{background-position:0px 0px;}
.d2{background-position:-50px -50px;}
.d3{background-position:-100px -100px;}
.d4{background-position:-150px -150px;}
.d5{background-position:-200px -200px;}
.d6{background-position:-250px -250px;}
.d7{background-position:-300px -300px;}
很明显，从7组坐标的数值来看，是从原点往右下延伸的，然后你在对比DEMO下面的坐标原图，发现7个div显示的效果却不是从我画的图片原点出发，而是从我画的图片的左上角，一直到右下角。所以你在写background-position坐标时，一定要把大图左上角的点当作原点，然后再来算你需要的图片的坐标。
最常见的拼图就是我最上面给的DEMO，小图标1-10呈竖线形式一顺往下排列，这个时候x轴的值是不会变动的，只要改变y轴值就行，而且y轴的值会越来越小，因为往下面的是负值了。好好想想这个地方，你就能很好的掌握这样一门实用的技术了。
如果不会拼图的朋友，其实网上有提供CSS Sprites样式生成工具，不仅把所有的小图片自动生成大图，而且提供准确的坐标。我前几天下载了一款，效果还是有的，只是合成的图片有些失真，所以就没用了，以后也不打算用，还是自己拼图比较方便。如果有需要的朋友请自行搜索吧。
最后提示几点，background-position的参数是x轴值 y轴值，不懂的参考CSS手册；x，y轴数值一般都≤0，因为图片位于坐标的右下角；拼图一定要设置成透明背景色。
两个DEMO源码下载：点我下载
不错不错，例子还是不够美观~~
我C，要不你来跟我做个好的例子图片啊！ 😡
精灵滑动门
给你个例子，不是垃圾评论~~~ ❗
牛逼，居然纯CSS实现，这个要好好研究下。
学习了 增长知识 我喜欢
前几天本来想用这个技术做一个导航，可是发现自己技术还是不行，
所以最后还是将图片分成几个不同的部分
现在懂了吧，可以先做个DEMO尝试下嘛。
这是写给我们小白看的 🙄
不然怎么叫新手教程呢，呵呵
原来这叫做CSS雪碧啊，一直知道有这个方法，想不到有个专有名词~~雪碧哈哈！
因为雪碧的英文就是Sprites嘛，所以也有人叫CSS雪碧
已经应用在主题上了
看来你是个高手啊！
西西最近，忙的很麻，俺来骚扰你了。。。 😈
工作了，肯定没有以前那么闲啊。
学习了 这东西其实有必要看一下的
相当实用的小技巧，只要流量大的网站，都用了这个的。
啊，原来我还不知道有这个，对了 跟你说的那个事情，那本书我真的想看哦 ！
日，你有钱去会情况，没钱买书啊，假得很！
我还买了《独唱团》要不要也借你看看？ 😈
你都这样说了，我该怎么开口！ ❓
妈的，泡妞回来也不跟我带礼物，想借书，你拿什么开口！！！ 😎
o 原来你是惦记这个啊 诶 你总不能跟个小娘们似的吧，好多娘们找我要礼物 哈哈！
那到没有，只是在微博上看见你说跟别人带礼物，突然想起来了。
我还缺那钱么 😎
是别人说给我带礼物啦 哈哈哈 你没仔细看 断章取义！
日，还没习惯微博倒着写…
哈哈 好了好了 看到好玩的东西 给你带一个就是！
突出不了我的特点，我可不要！
眼光得放犀利一点哦！
知道你看书厉害，不过看这种技术书，还是边看边实践。
我就喜欢看例子！~
今年例子大丰收 ❗
这么小 太精彩，我去也去试试
呵呵，大型网站都会用这个的，加载速度快。
我以前就在想 为什么很多门户 图片那么小 我一直认为是自己PS输出有问题 原来是这个原理
我是看见Google首页那个滑动的圆形，才知道有这个技术的。
只是不想动手拼图。。。还是找工具吧
如果我找到不失真的拼图工具，第一时间分享
呵呵..不错啊..连这些都能做出来了。。
其实CSS很强大的，我还有好多东西都没见过呢。
上次的主题好像有用到 不过自己搞不定
这个对作图还是有一点的要求的。
精彩的地方怎么可以少了我呀
大哥又来了啊，你那博客少儿不宜，我还单身呢
玩个点名游戏吧？有兴趣不？http://www.longzaivision.com/?p=714
抱歉，我不玩那个，不想把自己搞得太透明，保留点神秘感比较好 😆
最近刚好想关注一下css sprite,关注博主更新~
我也只是正好做网站用到这个，就发一下，以后自己忘记了也好复习嘛
这个 我看过 很毒鼠标放上去动态变换的 也是靠这个技术 对吧 呵呵
你说的是Google首页吧？那个确实是用这个，全部图片都在一张大图上。
属于技术贴，菜鸟来存粹支持了。
我也只是记录一下，防止以后忘记了。
呵呵，大小是实际字节数，不会变化。占用空间是在硬盘上使用的空间数，根据簇大小会有变化
这个到不是很懂，以前记得就一个参数的，容易看。
很白的村长要好好看看。。
你不会代码，还是不要看为好，面得越看越昏迷
博主写的很用心，赞一个，继续加油哦，关注
纯属支持，来踩，来顶！多点生活类的多好啊，呵呵
文笔不怎么好，生活很单调，不知道要写什么 ❓
我是来骚扰的、、、 😀
骚扰个P，看你的独唱团去
西门写的不错，这几天我也研究css sprite呢，刚才“苏扬 ”在我博客那边提到西门你这边有这样的实例，就过来看看。现在我那边有几篇很经典的关于css sprite的文章，不过都是转载的，我有时间也把心得写一下。
看了你下，你那输入高手阶段了，而我这写的是新手如何理解CSS Sprites这个技术而已。因为我就是通过类似的一个坐标图片来理解的。
头一次听到CSS Sprites，长知识了
这个技术很常用，只不过名字陌生而已。
😎 虽然还不是很明显 不过似懂非懂了