学习CSS中background-position的使用方法
来源:网络 作者:佚名 点击:
次时间:2017-06-21 21:32
[摘要]
|
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>
|
|
------分隔线----------------------------
