» 网友学堂 » HTML/CSS教程 » CSS：background-position的妙用 -> 查看 2007年02月15日 更新
CSS：background-position的妙用
作者：问天 发表时间：2007-2-15 01:12 阅读：210次 在百度搜索相关内容
css2.0 中的 background-position 大家用到过吗？怎么用的？用在哪里？js控制图片切换有两个缺陷：1.有时后切换缓慢,需要预载解决；2.要制作2-3套图片
　　看看怎么用 background-position 解决这个问题，实现快速"切换"，这里只用到一张图片
　　至于代码中的font:10px/1也是不常见的用法
[color=#FFFFFF'][/color]

　　这种用法放在网站地图或者导航条上的效果：
[color=#FFFFFF'][/color]


<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&;amp;AID=-1&;amp;refer=" escape(document.referrer) "&;amp;rand=" now.getTime() "&;amp;cur=" escape(document.URL) "' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&;amp;AID=-1&;amp;refer=noscriptcounter&;amp;cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
运行代码复制代码另存代码
#Advertisement