数学执本与率用
CSS 背景偏移技术实现网站导航菜单
王春明
(东北农业大学成栋学院黑龙江哈尔滨150025)
设计开发
摘要：本文主要介绍利用背量标的偏移技术，从一张背景图片上鼠取所需的小图标作为网站菜单项的导航图标，减少客户端从服务器下我图片的次数,从而提高服务器的性能。
关键词：骨景空标偏移background-position
中图分类号:TP311
文献标识码:A
文章编号:1007-9416(2013)11-0171-01
网站开发中常见的应用是利用背景坐标的偏移，截取一票背景图中某部分内客。在网站设计中，为了减少客户端从服务器下载图片的次数，提高服务器的性能，比较流行的做法是将多张图片拼合为一张大图片，然后利用backgrounxd-psition属性截取其中的各个小图，最后再显示在页面中。最常见的应用就是网站菜单图标的截取。现在以某网站的
导航莱单为例来说明具体的实现过程，实现效果如图1所示。 1建立标签组织结构.为各标签增加类名以区分

2设置CSS样式代码
21家器设需右浮动≤>左浮动并取消列表样式.top_menu(float : right,
.top_menu ul(liststyle:none,),top_menu lifloat: left,}
2.2调整背录偏移量，实现小图标显示
背景图中有很多的小图标，如图2所示：在这个背录图上依次截取所需的小图标，(1)截取小图1(购物车图标)作为第一个标签的背最图标。如图3所示，该图标位于图片的左上方，无偏移量。
心
加入&室图1导航菜单
Eds ciieb- NFRxA
快为
ali
用#春·？
图2背景图 p
29pa 20p
： epx
图3背景放大图
(2)截取小图2(帮助中心图标)作为第二个标签的背录景图标。如图3 所示，该图标纵向无偏移，横向需向左移动，所以为一80DX，对应的 css设置为：“background-position：8opxOpx，"(3)截取小图3(登录图标)作为按钮的背景图标。如图3所示，该图标横向无偏移，纵向需向上移动，所以为一2opx，对应的CSS设置为：“background-position:0px20px,
再根据图1确定布局各块大小，统一高度26px，小图标宽28px，登录注册宽度38px，各莱单项的具体样式代码为：
- picl [width:28px; height : 26px,background :url(. ./im ages/icon. gif) norepeat,
- pic2(width:28px; height :26px,background :url(. ./im ages/icon,gif) norepeat 28px 0px;3
pic3[width :28px,height:26px,background :url(. -/im-ages/icon.gif) norepeat 80px 0px;3
- pic4(width:28px; height: 26px;background :url(../im ages/icon.gif) norepeat 112px Opx;J
.btn(width : 38px,height :26px;background: url(. ./images/ icon.gif) norepeat Opx 20px;i
2.3设置文字大小及莱单文字间填充茅单文字居中对齐方式.左右填充5px
.top_menuul li aifont:12px/26px宋体，).textipadding :0px 5px ;textalign :center;
.btntpadding : 0px5px;textalign:center;width:38px height:26px;background:url(../images/icon-gif) norepeat
0px25px, 3代码复用
从上面的具体样式代码中，我们可以很明显地看到很多相似的样式代码，例如，前4个图标的样式修饰picl至pic4，除了偏移量以外，其他完全一致。我们可以把这些共同特征单独提取出来作为个pic类，然后再具体设置其他图标的独特样式，这样可以提高代码的复用性并方便维护，对应的CSS代码修改为：
- pic( width: 28px;height :26px,background; url(. . /images/
icon.gif) norepeat,i
-pic2(backgroundposition:28px 0px,)-pic3(backgroundposition:80px 0px;)-pic4;backgroundposition:112px Opx,
.btn (width :38px;backgroundposition:0px 20px; 在应用样式时，需要同时应用两种类样式，对应的代码修改为：

参考文献
[1］陈伟锋.俞国红.CSSSprite在网页制作中的应用江西电力职业技术学院学报2011年第4期
[2]李剑.傅妍燕.基于CSSSprite图像拼合技术在网站中的应用.《计算机光盘软件与应用》2012年第7期
作者篇介：主春明(1976-)，讲师，东北农业大学成学院教师。研究方向：计算机软件工程方向。
174