CSS精灵图

今天在复习css布局的时候了解到一个有意思的背景图片使用方法——精灵图，挺简单的一个布局方式，不过使用还是蛮频繁的,。

what?
css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中。

why？

how?

知道其原理，做法也就相当简单了，工欲善其事必先利其器
微软的fireworks可以极大提高我们的效率
下面运用精灵图的方式拼出任意字母
素材

如上图所示，其中红色区域圈中的部分为字母H的宽高和相对于坐标轴的位置（以div为例，默认图片是以左上角对齐，div左上角即坐标原点位置（0，0））因此默认给个字母大小的div，背景设为该图片时，显示的字母是A，
要显示H的话则是图片向左移动215px 向上移动141px，（注意向左向上都是负值）同理可以显示任意字母。

代码：

结果