Vista | 软件评测 | 系统备份 | 优化 | 进程 | 聊天 | 病毒 | Linux | 黑客 | 防火墙 | 数据库 | Web开发 | Java | Word | 游戏 | 32位开发 | 移动开发

当前位置：首页 > 网页制作 > CSS技术应用内容正文：CSS：background-position的妙用

CSS：background-position的妙用

发布时间：2006-05-26 09:07:46　来源：无忧脚本网友评论 0 条

　　css2.0 中的 background-position 大家用到过吗？怎么用的？用在哪里？js控制图片切换有两个缺陷：1.有时后切换缓慢,需要预载解决；2.要制作2-3套图片

　　看看怎么用 background-position 解决这个问题，实现快速"切换"，这里只用到一张图片

　　至于代码中的font:10px/1也是不常见的用法

　　可以参考这里:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm

　　这种用法放在网站地图或者导航条上的效果：

<style type="text/css">#menu a {display:block;width:150px;margin:6px; padding:10px 0 10px 32px;font:10px/1 sans-serif;color:#f90;background: url("http://nb001722.sosoo.net/btn.gif") top left no-repeat;text-decoration: none;}#menu a:hover {background-position: 0 -39px;color:red;}#menu a:active {background: url("http://nb001722.sosoo.net/btn.gif") 0 -78px no-repeat;color:black;}</style></head><body><div id="menu"><a href="###">Menu link 1</a><a href="###">Menu link 2</a><a href="###">Menu link 3</a><a href="###">Menu link 4</a><a href="###">Menu link 5</a></div><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

相关文章

【评论】【收藏本文】【打印】【关闭】

上一篇文章：fieldset实现表中表效果

下一篇文章：CSS+DIV设计实例：不同色链接和其下划线

已有 0 位对此新闻感兴趣的网友发表了看法

图文阅读推荐

CSS的“顶级技巧”

CSS的“顶级技巧”

如何使用CSS来进行网页排版

如何使用CSS来进行网页排版

CSS样式表教程-If you love css …

CSS样式表教程-If you love css …

推荐阅讯

阅读排行

专题教程

病毒专杀栏