CSS：background-position的妙

您现在的位置：圆点视线 >> 教程 >> 网页设计 >> DIV＋CSS专栏 >> 文章正文

[图文]CSS：background-position的妙

热 ★★★

CSS：background-position的妙

作者：佚名　文章来源：无忧脚本　点击数：　更新时间：2007-4-3 10:33:59　

　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

【字体：小大】

　　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("/web/UploadFiles/200704/20070403103425619.gif") top left no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: 0 -39px;
color:red;
}
#menu a:active {
background: url("/web/UploadFiles/200704/20070403103425619.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://www.apoints.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://www.apoints.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> 
</noscript>

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：apoints 责任编辑：apoints 　【字体：小大】

　

上一篇文章：用CSS制作照片走廊

　

下一篇文章：符合WEB标准的下拉导航菜单例子

最新文章

相关文章

XHTML+CSS的目的和好处(WEB标准的目的和好处
常见的CSS问题的“一站式”的解决方案
国外译文：网页设计如何使用CSS的选择器模式
CSS实现图片阴影效果三部曲(译文)
CSS实现不定高度DIV绝对居中
25条CSS制作网页编写的提醒及小技巧整理
Opera 中的 CSS 妙用 ── Flash block
什么是用户定义的样式表？
制作网页时手写CSS应该注意的一点技巧
网页中用于构造图表的一些基本CSS代码

网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

发表评论：

姓　　名：		评分： 1分 2分 3分 4分 5分
评论内容：		·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。 ·用户需对自己在使用本网服务过程中的行为承担法律责任 ·本站管理员有权保留或删除评论内容。 ·评论内容只代表机友个人观点，与本网站立场无关。

最新推荐

百度主题推广

最新热门