CSS:Sprites

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

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




  

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

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

你可能感兴趣的:(CSS:Sprites)