web前端工程师必须掌握的技巧–CSS Sprites技术（附基础操作教程）

CSS Sprites

CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

使用CSS Sprites的优劣

使用CSS Sprites可以很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点。

但是维护起来比较麻烦。这里我分享一下我自己实际运用中的工具、方法和技巧。
工具准备

Fireworks_CS5：http://pan.baidu.com/s/1pJyeT3X

打开Fireworks新建一张图，把LOGO放进去（这里为了方便演示，LOGO图片位置随意放的），保存图片命名为sprite.png如下图：




Fireworks很方便，选择LOGO后，下方直接显示出LOGO的图片大小跟坐标位置。

假设我们要使用LOGO图片

对应的CSS代码
.logo {
background:(../images/sprite.png) no-repeat;
background-position:-24px -40px;
/*这里使用负值，前面加-号*/
width:210px;height:52px;
}
也可以简写成:

.logo {
background:(../images/sprite.png) -24px -40px no-repeat;
width:210px;height:52px;
}
然后再导出图片（建议把源文件跟导出图分开，这样如果以后要修改图片内容或者增加图片内容，就直接在源文件图片里编辑，再导出就可以了，方便管理）

当然网上还有一些CSS Sprites生成工具，方便是方便，不过修改起来麻烦，还是自己***比较好，方便管理修改，而且图片的质量也能得到保证