讨论所有的背景图片都放在一张大图片

　　不知道什么时候起，用firebug查看元素的时候，发现一张密密麻麻的图片，上面尽是本页面或者该站点的背景图片。网上看了资料这种搞法叫CSS Sprites（css精灵），乍一看还以为是什么神奇的软件其实就是把整个页面的背景图全部又一张大图包揽！目前很多牛逼的站都采用这种技术，比如百度的地图,音乐，文库，新闻等栏目，谷歌，facebook 等等有用到了！可能是从业尚浅，或者自身迟钝吧，我现在才发现这些东西的存在。为什么会如此火呢，这个技术？

       原因有很多，主要是可以提升用户体验！个人认为这是最重要的。虽说现在的网速已经是很快了，但是 http请求，既然是”请求” 想对来说是很慢的！而且本身被访问的网站服务器在高峰时也会表现的十分迟缓！当用firebug查看“网络”里面的时候会发现密密麻麻的“GET”请求 ，有请求*.css 文件的，有请求*.js 文件的，另外也有很多不知是请求神马的。最引人注目的是，鼠标放上去会出现一张图片的get请求，没错那就是浏览器在加载图片，加载虽然只有几毫秒或者几百毫秒，若图片多了，反复的 解析->发送->等待->接收 这个过程，必然会拖慢网页的显示速度，或者出现此处图片出来，彼处仍是空白的局面。（当然这个时间是很短的） 为了解决这种困境，开发者于是将所有的get 图片请求 一次性搞定，那就快多了！很明显了减轻了http请求的压力！虽然也会出现图片未加载进来的情况，但是至少表现了一致性！

       这种打包式的请求也能节约一些带宽，很多张小图的总大小，比一大张图所占空间要大，而且图片越多越明显！当然这个需要你优化图片是时候，按照相同的优化规则！

       除此之外，CSS Sprites 还可以解决图片命名的问题！呵呵！

不过，他也有一些很纠结的问题存在，CSS Sprites 的核心是background-position；用大图的话就必须要用一个封闭的盒子来”遮盖” 不该看到的部分。而且大图不论是维护修改还是一开始的构建 都是十分蛋疼的事情! 因为你要考虑那些图片需要重复，重复的方向是x还是y；还要清楚 每一个小图在大图基点的坐标 这都关系到这张大图里的小图怎么安顿，十分繁琐。修改的时候改颜色还好，改大小的话可能会牵动到整个与大图有关的css代码！

       笔者建议，CSS Sprites 慎用！ 可以这样，repeat-x，repeat-y, 和写死的无需重复背景图的元素 各用一张大图。这样分类处理也许效率会高一些！