#navbar span {
/* 定义<span>标签将截取的图片宽度和高度 */
width:30px; height:31px;
/* 添加包含了所有图标的图片 */
background-image:url(images/imagemap.gif);
display:inline; float:left;
}
/* background-position：指定图标在CSS Sprites图片的偏移量
margin-left 和 margin-right 则用来定位图标位置
*/
.home { background-position:0 0; margin-left:2px;}
.gifts { background-position:-35px 0; margin-left:50px;}
.cart { background-position:-70px 0; margin-left:120px;}
</style>
<div id=”navbar” style=”border: 2px ridge rgb(51, 51, 51); padding: 4px 0pt; background-color:#ff0; width: 300px; height: 32px;”>
<a href=”javascript:alert(‘Home’)” title=”Home”>
<span class=”home”></span></a> <!– 注意：该span标签用来加载图片 –>
<a href=”javascript:alert(‘Gifts’)” title=”Gifts”>
<span class=”gifts”></span></a> <!– 注意：该span标签用来加载图片 –>
<a href=”javascript:alert(‘Cart’)” title=”Cart”>
<span class=”cart”></span></a> <!– 注意：该span标签用来加载图片 –>
</div>
注意：在这个“CSS Sprites”中用到的图片就是“图片地图”中的同一张图片。（并特地只显示其中的三个图标）
CSS Sprites的原理：只是定位到图片其中的一块区域，并显示在某个位置而已。
CSS Sprites的优点：通过只使用一个图片减少了HTTP请求，并且比“图片地图”更灵活。
很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。
实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。
方案三：内联图片：通过使用data: URL模式在Web页面中包含图片，且无需任何额外的HTTP请求。（IE目前不支持）
1、内联图片的原理：允许将小块数据内联为‘立即数(immediate data)’，数据就包含在其URL自身之中。
2、内联图片的格式：data:[<mediatype>][;base64]，<data>
举例：一个内联图片可以定义为
<img src="data:image/gif;base64，asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33" >
其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。
data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。
3、内联图片的缺陷：
a> 不受IE的支持（IE7也如此）；
b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；
