CSSsprites在国内很多人称之为CSS精灵，更为通俗的叫法就是常说的雪碧图，下面就用雪碧图来称呼这一图片处理方式。雪碧图常用来处理网页布局中大量的小图标或者小贴图，并可以把这些小图标所用的图片整合到一张较大的图片中。
先说雪碧图的准备工作，先为每一处需要用到雪碧图的图标处准备好容器（标签），容器必须支持宽高，并为容器设置好所需要显示的图标尺寸宽高，用来专门放置背景图，并给他们取上一个相同的class名。然后把所有图标放在同一张图片里，建议图标都靠左排列，这样有利于之后在引用时查找。这里需要注意的是，雪碧图的格式需为png格式以支持透明背景，jpg不支持透明背景，默认的白色背景在一些带背景颜色的标签里会显得
<style>
.icon{ background:url(images/icon.png) no-repeat;}
.icon1{ width:50px; height:50px; background-position:-82px -99px;}
.icon2{ display:block; width:50px; height:50px; background-position:-42px -102px;}
.icon3{ display:block; width:59px; height:18px; background-position:0 -52px;}
</style>
<body>
<div class="icon icon1"></div>
<span class="icon icon2"></span>
<i class="icon icon3"></i>
</body>
如上代码中，
共用的class用来引出雪碧图路径；
no-repeat使得图片不会重复平铺；
而在各个标签中的宽高是为了在引用雪碧图时只显示你所需的图标，不然会显示雪碧图中你所需图标以外的内容。
最重要的就是寻找你所需图标在雪碧图中的位置，以图标距离雪碧图左边框与上边框的距离的负值作为background-position的值。根据背景样式的特征，就是以标签作为可视区域，雪碧图的左上角本应与标签的左上角对齐摆放，给予background-position负值，即让雪碧图向左边以及上方移动相应距离，使图标所在位置的左上角对齐标签的左上角。便使得图标正好出现在标签所设定的显示区域。
网友评论