当前位置 :首页 ->网站设计 ->网页制作 ->正文

CSS：background-position的妙用

来源：Linuxdby.com 作者：Webmaster 时间：2007-04-28 点击： [收藏] [投稿]

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

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

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

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

<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做一个超链接的陷下效果下一篇：用CSS制作照片走廊

【文章评论】【收藏本文】【推荐好友】【打印本文】【我要投稿】【论坛讨论】

更多相关文章

·4天学会 NoahWeb 表单 - 第四天

·4天学会 NoahWeb 表单 - 第三天

·4天学会 NoahWeb 表单 - 第二天

·4天学会 NoahWeb 表单 - 第一天

·表单制作方式大比拼

·在 CSS 中关于字体处理效果的思考

·捷足先登学用CSS：HTML结构化

·弹出网页窗口设计全攻略

·target="_blank"不符合标准?

·CSS滤镜属性详解

推荐文章

·互联网观察：解读RSS新闻聚合的未来

·使用 CSS 创建固定宽度的布局

·在文章管理列表直接生成HTML静态页

·DHTML编写经得起考验的可移植代码

·文件夹管理

·避免表格table被撑开变形的CSS

·供求最终信息页标签

·使用Web标准建站第11天：不用表格的

精彩文章

·CSS重新定义项目符号和编号

·Html网页页面head区规范知识

·精通 CSS 滤镜（二）

·搞定CSS SPAN和DIV的区别

·4天学会 NoahWeb 表单 - 第三天

·新建栏目演示

·文本填充，边框，边界和位置属性（

·使用Web标准建站第2天：什么是名字

·有效控制新闻内容的图片的尺寸

·Xhtml第3天：定义语言编码

·XHTML基础问答－给初学者

·HTML的排版标记

·避免表格table被撑开变形的CSS

·mailto”标签四则应用技巧

·弹出网页窗口设计全攻略

·系统在Win XP Pro下安装

·使用Web标准建站第8天：CSS布局入门

·纯CSS制作简洁的垂直导航

·10个你未必知道的CSS技巧

·CSS 循序渐进（二）字的艺术

·Div+CSS布局入门教程

· 网页制作中表单相关特效整理

·Xhtml第1天:选择什么样的DOCTYPE

·HTML语言剖析（一）Html简介

·你究竟了解多少HTML代码

Power by linux-cn.com 粤ICP备05006655号