CSS图片拼合即CSS sprites就是将网站上“多个图片将以一定间距合并为一个大图片文件， 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置”，“可有效降低图片文件的 HTTP 连接请求数”，或者说也降低访问网站时的连接请求数，提高网站性能，如果你有使用YSLOW或其它一些网站性能测试工具或测试网站，一般都会给出这样的建议，如果看不懂英文的话，百度统计的网站速度诊断也会有同样的建议：“使用css sprites技术可以减少请求次数”。
那么如何在网站上实现css sprites呢，推荐使用一个网站工具：CSS 图片拼合生成器，它解决的问题是合并图标，并给出拼合后图片的“坐标”，接着你就可以在CSS样式表中用background-position来引用这些“坐标”定位图标，代替原先使用的一个一个零散的background-image。具体的就不说了，那个网站里也有详细的解释，实在不明白，就看看我的网站css文件与网页代码。我的建议是，可以选用合并成png格式的图片，保持背景透明，这样适用度更高些，不必担心网站上不同的背景色的影响，不过如果图片太大，可以改成gif，还能兼容IE6，转换图片格式时记得去掉“强制黑白”，这样没有黑色锯齿边；图片间距不一定要太大，也不要选得太小，避免显示时把不必要的图标边缘露出来，因为你即使你严格按照“坐标”来布局，还是需要一点点微调，这时间距的大小可能很关键，不希望露出别图标的话，就把图标尽量靠在边上，比图标在显示在右端，就把图标放在图片的左边，这样图标的左侧就不会露出其它的图标干扰布局；如果要让背景图片可以有链接（CSS拼合的一般都是背景图片，当然你可以把前景图片也“挪”成背景图片），只要把背景图片设到<a>链接里；最后麻烦的重复图片（repeat-x、repeat-y），CSS sprites并非不支持重复图片，只是如果拼合在一起的图片如果尺寸不一，就达不到重复的效果，除非把横向和纵向重复的图片另外分别拼合，并且做成宽度（横向重复）或高度（纵向重复）一致，才能避免重复时不出现图片上其它不想让它显示的部分，或者不用重复，直接按长高设成完整的图片，再进行拼合，这样的后果是文件体积变大，不过只要网站不大，文件也大不到哪去。
至于z-blog这样的网站要不要用CSS sprites又是另一个问题。图片拼合对于那些图片较多的网站确实很有效，能大量减少HTTP请求数，而用z-blog搭建的博客网站，一般情况或者说绝大多数情况下，是不会有大量图片的，反而如果把前景图片变成背景图片，由css样式表文件加载，则有可能会在文章页加载了额外的图片，除非是合并在统一的图片中，不会增加图片的数量，但可能增加图片文件的体积（这也是个问题，合并时是考虑图片的体积还是考虑图片的数量）。
所以我不建议使用zblog类博客网站的站长使用css sprites，至少在你的空间、文章数量、网站速度、访问压力都可以接受的情况下，没必要去做拼合，完全可以忽视那些网站“优化”建议，除非你想象我一样顺便玩玩这个技术，或者真的HTTP请求连接数太多、网站访问流量太大，适当做点调整才是必要的。同时不要忘记CSS sprites的缺点，那就是以后想要调整其中某个图标的话会比较麻烦，那样你要处理的将是整个或者半个网站的图片。
>> 除非说明均为原创，如转载请注明来源于http://www.stormcn.cn/post/1110.html
