SmartSprites 可以让你很容易的使用 css sprites, 并且容易维护, 你可以在 css 文件中插入一些标记和指令, 来指示某些图片是否放入 css sprites 图片里, SmartSprites 会解析你的css 文件去自动生成合成图, 并且生成需要的样式. 如果图片有修改，只需执行一下命令，新的sprite就又生成了。这样就可以大大的提高开发效率，维护起来也比较方便。
快速引导：
1. 下载并且安装 jdk1.5 以上版本。
2. 下载SmartSprites http://csssprites.org/download.html?v0.2.6 并解压到任意目录下。
3. 修改smartsprites.cmd文件，找到java %OPTS% -Djava.ext.dirs = lib org.carrot2.labs.smartsprites.SmartSprites 这行，将lib替换成该目录下lib文件夹的绝对路径。
4. 配置环境变量，path后边追加smartsprites的绝对路径；如：d:/smartsprites-0.2.8
5. 编写需要的css文件，如：
#web {
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url(../img/icon1.png);
}
#logo {
width: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url(../img/icon2.png);
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url(../img/icon3.png);
}
6. 用 smartsprites 的指令注释 css 文件
/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
#web {
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url(../img/icon1.png); /** sprite-ref: mysprite; */
}
#logo {
width: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url(../img/icon2.png); /** sprite-ref: mysprite; sprite-alignment: right */
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url(../img/icon3.png); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */
}
7. 打开cmd命令行窗口,键入smartsprites d:/example/style.css。
