背景图片的应用有两种方式: （1）.将每一个背景都独立成一张图片单独使用。 （2）.将所有的背景图片都集中在一张图片上，利用background结合宽度和高度实现对背景图片的设置。 后者优点非常明显，可以减少对服务器请求的次数，减轻服务器压力。 下面就简单介绍一下如何实现此种效果。 背景图片如下: 
[HTML] 纯文本查看 复制代码运行代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS如何将背景图片集中在一张图片上-蚂蚁部落</title>
<style type="text/css">
div{
height:28px;
width:300px;
border-bottom:3px solid #E10001;
}
ul{
list-style:none;
margin:0px;
padding:0px;
}
ul li{
float:left;
width:87px;
height:28px;
margin-left:2px;
display:inline;
}
ul li a{
width:87px;
height:28px;
display:block;
font-size:14px;
text-align:center;
line-height:28px;
text-decoration:none;
color:#333;
background:url(mytest/demo/nav_bg.gif) 0 -28px no-repeat;
}
ul .dangqian a{
background:url(mytest/demo/nav_bg.gif) 0 0px no-repeat;
}
ul li a:hover{
background:url(mytest/demo/nav_bg.gif) 0 -56px no-repeat;
}
</style>
</head>
<body>
<div>
<ul>
<li class="dangqian"><a href="#">CSS专区</a></li>
<li><a href="#">JS专区</a></li>
<li><a href="#">HTML专区</a></li>
</ul>
</div>
</body>
</html>
通过定位结合长宽尺寸来实现了我们想要的的效果。 background参阅background-position定位详解一章节。 | 
