CSS背景图片合并工具

上一篇文章中讲到如何合并JS文件，这篇文章我再介绍下如何合并CSS背景图片。合并CSS背景小图片不只适用于Wordpress，而是几乎对所有网站都适用。为什么要合并CSS背景图片呢？因为要给网站提速，很重要的一点就是减少http连接数，而CSS背景图片越多，向服务器的请求数也就越多。百度、雅虎、淘宝等各个大型网站都是如此操作的，给我们的学习树立了榜样。

如果你会Photoshop，那合并这些CSS背景图片应该对你来说是小菜一碟啦。合并之后只要用background-position属性来控制需要显示的部分图片的位置就可以了。参考CSS代码如下：

background-image:url(URL);
background-position:top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x% y% / xpos ypos;
background-repeat:no-repeat;

我不会Photoshop，也不会Fireworks，所以当初合并CSS背景让我费尽心机伤透脑筋，不过还好，让我找到了一款小工具代劳。下面隆重推出本文的重点，CSS背景图合并工具（V0.11）。点此下载（17.5K）

CSS背景图片合成工具V0.11

小身材，大作用。此小工具可供选择合并后的大图类型：Png/Jpeg/Gif，还可以选择背景色，默认是Transparent（透明）。我用的是Gif格式，这样就避免了在IE6下不兼容的麻烦事。生成好背景图片的同时还会生成一个CSS文件，其中包含了每个小图相应的CSS代码，很省事啊。

话说回来合并CSS背景图片也有缺点，就是日后不利于维护。不过有了这款小软件，让我轻松不少，如果你和我一样也是PS或CSS菜鸟，建议你也试用下CSS背景图合并工具吧。