CSS：Sprites

CSSsprites在国内很多人称之为CSS精灵，更为通俗的叫法就是常说的雪碧图，下面就用雪碧图来称呼这一图片处理方式。雪碧图常用来处理网页布局中大量的小图标或者小贴图，并可以把这些小图标所用的图片整合到一张较大的图片中。

先说雪碧图的准备工作，先为每一处需要用到雪碧图的图标处准备好容器（标签），容器必须支持宽高，并为容器设置好所需要显示的图标尺寸宽高，用来专门放置背景图，并给他们取上一个相同的class名。然后把所有图标放在同一张图片里，建议图标都靠左排列，这样有利于之后在引用时查找。这里需要注意的是，雪碧图的格式需为png格式以支持透明背景，jpg不支持透明背景，默认的白色背景在一些带背景颜色的标签里会显得

如上代码中，
共用的class用来引出雪碧图路径；
no-repeat使得图片不会重复平铺；
而在各个标签中的宽高是为了在引用雪碧图时只显示你所需的图标，不然会显示雪碧图中你所需图标以外的内容。

最重要的就是寻找你所需图标在雪碧图中的位置，以图标距离雪碧图左边框与上边框的距离的负值作为background-position的值。根据背景样式的特征，就是以标签作为可视区域，雪碧图的左上角本应与标签的左上角对齐摆放，给予background-position负值，即让雪碧图向左边以及上方移动相应距离，使图标所在位置的左上角对齐标签的左上角。便使得图标正好出现在标签所设定的显示区域。