background-position的妙用::设计路上::网页设计、网站建设、平面设计爱好者交流学习的地方

文章分类

Fireworks教程

产品搜索

关键字:

分类：

最新素材图库

当前位置:首页 >> 网页教程>> HTML/CSS >> background-position的妙用

background-position的妙用

作者: 佚名 来源：网络 浏览：1354 日期:2006-6-12 16:10:54

　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="http://www.68design.net/art/###/">Menu link 1</a>
<a href="http://www.68design.net/art/###/">Menu link 2</a>
<a href="http://www.68design.net/art/###/">Menu link 3</a>
<a href="http://www.68design.net/art/###/">Menu link 4</a>
<a href="http://www.68design.net/art/###/">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设计实例：Hover over下的边框变化

【关闭窗口】【返回顶部】【返回网页教程】【返回HTML/CSS】

相关推荐文章

表格对决CSS--一场..

用CSS定义标题的几个..

采访Eric Meye..

用代码“写”出扫描线效..

CSS教程—元素的定位

关于CSS的一小点心得

不用script仅用c..

关于本站 | 广告服务 | 联系我们 | 站点留言 | 活动支持 | 友情链接 | 投稿热线 | 网站地图

版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号