CSS背景偏移技术实现网站导航菜单

点赞:4540 浏览:13277 近期更新时间:2023-12-20 作者:网友分享原创网站原创

摘 要 :本文主要介绍利用背景坐标的偏移技术,从一张背景图片上截取所需的小图标作为网站菜单项的导航图标,减少客户端从怎么写作器下载图片的次数,从而提高怎么写作器的性能.

关 键 词 :背景坐标 偏移 background-position

中图分类号:TP311 文献标识码:A 文章编号:1007-9416(2013)11-0171-01

网站开发中常见的应用是利用背景坐标的偏移,截取一张背景图中某部分内容.在网站设计中,为了减少客户端从怎么写作器下载图片的次数,提高怎么写作器的性能,比较流行的做法是将多张图片拼合为一张大图片,然后利用background-position属性截取其中的各个小图,最后再显示在页面中.最常见的应用就是网站菜单图标的截取.现在以某网站的导航菜单为例来说明具体的实现过程,实现效果如图1所示.

2.2 调整背景偏移量,实现小图标显示


背景图中有很多的小图标,如图2所示:在这个背景图上依次截取所需的小图标.(1)截取小图1(购物车图标)作为第一个标签的背景图标.如图3所示,该图标位于图片的左上方,无偏移量.

CSS背景偏移技术实现网站导航菜单参考属性评定
有关论文范文主题研究: 计算机相关论文范文 大学生适用: 在职研究生论文、本科毕业论文
相关参考文献下载数量: 84 写作解决问题: 如何写
毕业论文开题报告: 文献综述、论文结论 职称论文适用: 技师论文、中级职称
所属大学生专业类别: 如何写 论文题目推荐度: 免费选题

3.代码复用

参考文献

[1]陈伟锋,俞国红.CSS Sprite在网页制作中的应用.《江西电力职业技术学院学报》,2011年第4期.

[2]李剑,傅妍燕.基于CSS Sprite图像拼合技术在网站中的应用.《计算机光盘软件与应用》,2012年第7期.