CSS精灵图技术

一、css精灵图技术有很多的优点的 比如：

1. 减少图片的字节。
2. 减少网页的http请求，从而大大的提高页面的性能。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小 元素进行命名，从而提高了网页的制作效率。
4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

二、实现的原理：
需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位
例一、下图就是一张精灵图：
1. 然后我们使用fireworks来确定你需要选的图片位置过程如下：

2. 下面是演示代码：

浏览器执行结果：

例二、下面是一张26字母表，我们利用这张图来拼出一个GOOGLE

3. 利用fireworks 确定好位置后，代码如下：