小论CSS之position, background-position

巧妙使用position, background-position能巧妙的创造出高质量的页面。

 

 

下面看代码：我加“关键！“的注释部分表示会对结果产生很大影响。

 

 

1. <style>
2.     body{
3.         margin: 0px;/* 为了便于观察结果*/
4.     }
5.     .home{
6.         height: 30px;/*菜单总高度*/
7.         font-weight: bold;
8.         float: left;/*每个菜单div会横向排列，关键！*/
9.         border-bottom: solid red 1px;/* 为了便于观察*/
10.         overflow: hidden;/*否则如果图片过高， 会超出border，关键！*/
11.     }
12.     .home a{
13.         height: 100%;/*关键！*/
14.         top: 5px;/*于顶部有5px的空隙，关键！*/
15.         position: relative;/*只有为relative时候top才会生效，关键！*/
16.         padding-left: 9px;/*左边的圆角图片的宽度，关键！*/
17.         margin-right: 5px; /*菜单之间的宽度*/
18.         background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif) no-repeat left top;
19.     }
20.     .home a span{
21.         height: 100%;/*关键！*/
22.         position: relative;/*关键！*/
23.         padding: 5px 20px 0px 11px;/*将使文字居中*/
24.         background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif) no-repeat right　top;
25.     }
26.     .home a:hover{
27.         /*鼠标悬停的时候显示图片的高亮部分*/
28.         background-position: 0% -125px;
29.         top:0px;/*于顶部的5px的空隙将消失*/
30.     }
31.     .home a:hover span{
32.         /*鼠标悬停的时候显示图片的高亮部分*/
33.         background-position: 100% -125px;
34.     }
35. </style>
36. <div class="home"><a href="#"><span>Home</span></a></div>
37. <div class="home"><a href="#"><span>Home</span></a></div>