background-position的妙用—HTMLCSS教程

我的联盟 作品招聘外包人才　 酷站加油 国内国外 CSS　 资源图库 图库模板矢量图标　 设计欣赏 界面 LOGO 插画艺术　网页平面　专访名站竞赛社区

当前位置：首页 > 网页教程 > HTMLCSS教程 > 正文

background-position的妙用

来源：天极网　2006年05月25日 15:11　网友评论：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>

上一篇：CSS+DIV设计实例：Hover over下的边框变化　　下一篇：fieldset实现表中表效果

【收藏此页】【打印】【关闭】

　相关文章

　我要点评

免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。对本文有任何异议，请联络：68design#163.com
转载要求：作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印。

关于我们 | 设计服务 | 广告服务 | 常见问题 | 网站地图 | 法律声明 | 联系我们

Copyright © 2003-2012 68design.net, All Rights Reserve 【找网页设计师，当然上网页设计师联盟】　