CSS Sprites新手教程

CSS Sprites新手教程

刚开始认真学习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值为：

<div id="_mcePaste">.d1{background-position:0px 0px;}</div> <div id="_mcePaste">.d2{background-position:-50px -50px;}</div> <div id="_mcePaste">.d3{background-position:-100px -100px;}</div> <div id="_mcePaste">.d4{background-position:-150px -150px;}</div> <div id="_mcePaste">.d5{background-position:-200px -200px;}</div> <div id="_mcePaste">.d6{background-position:-250px -250px;}</div> <div id="_mcePaste">.d7{background-position:-300px -300px;}</div>

很明显，从7组坐标的数值来看，是从原点往右下延伸的，然后你在对比DEMO下面的坐标原图，发现7个div显示的效果却不是从我画的图片原点出发，而是从我画的图片的左上角，一直到右下角。所以你在写background-position坐标时，一定要把大图左上角的点当作原点，然后再来算你需要的图片的坐标。

最常见的拼图就是我最上面给的DEMO，小图标1-10呈竖线形式一顺往下排列，这个时候x轴的值是不会变动的，只要改变y轴值就行，而且y轴的值会越来越小，因为往下面的是负值了。好好想想这个地方，你就能很好的掌握这样一门实用的技术了。

如果不会拼图的朋友，其实网上有提供CSS Sprites样式生成工具，不仅把所有的小图片自动生成大图，而且提供准确的坐标。我前几天下载了一款，效果还是有的，只是合成的图片有些失真，所以就没用了，以后也不打算用，还是自己拼图比较方便。如果有需要的朋友请自行搜索吧。

最后提示几点，background-position的参数是x轴值 y轴值，不懂的参考CSS手册；x，y轴数值一般都≤0，因为图片位于坐标的右下角；拼图一定要设置成透明背景色。