CSS的图标显示技术

也就是利用CSS Sprites 图片整合技术,将网站所需的icon都放到一张图里面

优点:减小图片下载体积,减少对服务器的请求,从而提高了页面的加载速度

但怎么用才简单方便,就个人经验而言,一般是这样做的:
1,建一个名为icon_map的图,大小为宽高320px,因为一般icon为16×16大小,这样横竖可以放20个,完全够用了。并在ps中用辅助线划分好,直接往里填图标即可
2,格式采用gif,支持透明,因为icon一般可用像素图完成,且适用范围可覆盖所有浏览器,包括IE6的透明
3,书写css样式:

.icon { display:-moz-inline-box; -moz-box-align:center; }
.icon { display:inline-block; width:16px; height:16px; background-image: url(../images/icon_map.gif); vertical-align:middle; }
.icon_1_01 { background-position: 0 0; }
.icon_1_02 { background-position: -16px 0; }
.icon_1_03 { background-position: -32px 0; }
.icon_1_04 { background-position: -48px 0; }
.icon_1_05 { background-position: -64px 0; }
.icon_1_06 { background-position: -80px 0; }
.icon_1_07 { background-position: -96px 0; }
.icon_1_08 { background-position: -112px 0; }
.icon_1_09 { background-position: -128px 0; }
.icon_1_10 { background-position: -144px 0; }
.icon_1_11 { background-position: -160px 0; }
.icon_1_12 { background-position: -176px 0; }
.icon_1_13 { background-position: -192px 0; }
.icon_1_14 { background-position: -208px 0; }
.icon_1_15 { background-position: -224px 0; }
.icon_1_16 { background-position: -240px 0; }
.icon_1_17 { background-position: -256px 0; }
.icon_1_18 { background-position: -272px 0; }
.icon_1_19 { background-position: -288px 0; }
.icon_1_20 { background-position: -304px 0; }

.icon_2_01 { background-position: 0 -16px; }
.icon_2_02 { background-position: -16px -16px; }
.icon_2_03 { background-position: -32px -16px; }
.icon_2_04 { background-position: -48px -16px; }
.icon_2_05 { background-position: -64px -16px; }
.icon_2_06 { background-position: -80px -16px; }
.icon_2_07 { background-position: -96px -16px; }
.icon_2_08 { background-position: -112px -16px; }
.icon_2_09 { background-position: -128px -16px; }
.icon_2_10 { background-position: -144px -16px; }
.icon_2_11 { background-position: -160px -16px; }
.icon_2_12 { background-position: -176px -16px; }
.icon_2_13 { background-position: -192px -16px; }
.icon_2_14 { background-position: -208px -16px; }
.icon_2_15 { background-position: -224px -16px; }
.icon_2_16 { background-position: -240px -16px; }
.icon_2_17 { background-position: -256px -16px; }
.icon_2_18 { background-position: -272px -16px; }
.icon_2_19 { background-position: -288px -16px; }
.icon_2_20 { background-position: -304px -16px; }

这里只写了前2排,后面依次类推,用到时再补充
a,inline-block是方便直接与文字同行,并用-moz-兼容FF2
b,用数字表示横纵的位置,这样要用icon_map中的第几个,可以方便调用:
如要用第1排第5个图标,则css调用为:

<span class=”icon icon_1_05″></span>

第2排第20个则为

<span class=”icon icon_2_20″></span>

当然你还可以用具体的名字,而不用几排几个,毕竟是魔鬼数字,不好辨认
其实不仅仅是图标,其他图片都可以做相应的整合,修改下大小和位置即可