今天无意中，看别人代码发现一个背景图中有很多图片

当时想这么多怎么就显示一个按钮的背景呢？百思不得其解，后来发现CSS 这样定义

1. .nav { 
2. background:transparent url(images/y.gif) no-repeat scroll 0 0; 
3. height:42px; 
4. width:980px; 
5. font-size:12px; list-style:none; 
6. } 
7.  
8. .nav ul{ 
9. padding-left:4px; 
10. } 
11. .nav li{position:relative;float:left;} 
12.  
13.  
14. .nav .page_item a{ 
15. height:42px; 
16. line-height:35px; 
17. display:inline-block; 
18. padding-right:13px; 
19. color:#000000; 
20. outline:none; /* for firefox 1.5 + */ 
21. hide-focus: expression(this.hideFocus=true); /* for ie 5+ */ 
22. } 
23.  
24.  
25. .nav .page_item a span{ 
26. display:inline-block; 
27. height:42px; 
28. cursor:pointer; 
29. padding:0px 0px 0px 12px; 
30. } 
31.  
32. .nav .page_item a:hover,.nav .current_page_item a{ 
33. background:url(images/x.gif) no-repeat right -90px; 
34. } 
35.  
36. .nav .page_item a:hover span, .nav .current_page_item a span{ 
37. color:#FFFFFF; 
38. background:url(images/x.gif) no-repeat left -90px; 
39. } 

后来查看 background 定义，找到 background-position
定义和用法

background-position 属性设置背景图像的起始位置。
原来设置这个属性可以让图片显示某一位置 ,注意有两个值
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。

把位置变换一下 在看效果 ：

1. .nav { 
2. background:transparent url(images/y.gif) no-repeat scroll 0 0; 
3. height:42px; 
4. width:980px; 
5. font-size:12px; list-style:none; 
6. } 
7.  
8. .nav ul{ 
9. padding-left:4px; 
10. } 
11. .nav li{position:relative;float:left;} 
12.  
13.  
14. .nav .page_item a{ 
15. height:42px; 
16. line-height:35px; 
17. display:inline-block; 
18. padding-right:13px; 
19. color:#000000; 
20. outline:none; /* for firefox 1.5 + */ 
21. hide-focus: expression(this.hideFocus=true); /* for ie 5+ */ 
22. } 
23.  
24.  
25. .nav .page_item a span{ 
26. display:inline-block; 
27. height:42px; 
28. cursor:pointer; 
29. padding:0px 0px 0px 12px; 
30. } 
31.  
32. .nav .page_item a:hover,.nav .current_page_item a{ 
33. background:url(images/x.gif) no-repeat -30px -240px; 
34. } 
35.  
36. .nav .page_item a:hover span, .nav .current_page_item a span{ 
37. color:#FFFFFF; 
38. background:url(images/x.gif) no-repeat left -240px; 
39. } 

页面代码：

1. <link rel="stylesheet" href="3.css" type="text/css" media="screen" /> 
2. <br /> 
3. <br /> 
4. <br /> 
5. <br /> 
6. <div class="nav"><ul> 
7. <li class="page_item page-item-649"><a href="http://www.sundayhack.cn/" title="首页文章"><span>首页文章</span></a></li> 
8. <li class="page_item page-item-480"><a href="http://www.sundayhack.cn/about" title=关于本站"><span>关于本站</span></a></li> 
9. <li class="page_item page-item-481"><a href="http://www.sundayhack.cn/links" title="友情链接"><span>友情链接</span></a></li> 
10. <li class="page_item page-item-482"><a href="http://www.sundayhack.cn/sitemap" title="网站地图"><span>网站地图</span></a></li> 
11. <li class="page_item page-item-491"><a href="http://feed.feedsky.com/sundayhack" target="_blank" title="订阅本站"><span>订阅本站</span></a></li> 
12. </ul></div>