楼主的意思应该是用CSS控制，使几个不同的按钮分别使用同一张背景图里的不同区域来做背景吧？这个技术叫CSS Spirit，具体就是通过background-position属性来定位背景图，示例代码如下：
HTML：
<!DOCTYPE html><html>
<head>
<meta charset='utf-8'>
</head>
<body>
<ul class="btnBox">
<li><a href="javascript:" class="btn btn_1"></a></li>
<li><a href="javascript:" class="btn btn_2"></a></li>
<li><a href="javascript:" class="btn btn_3"></a></li>
</ul>
</body>
</html>
CSS：
body{background: #27AFDF
}
.btnBox{
list-style: none
}
.btnBox .btn{
display: block
width: 110px
height: 32px
background: url('btnBackground.jpg')
margin-bottom: 20px
}
.btnBox .btn_1{
background-position: 0px -74px
}
.btnBox .btn_2{
background-position: 0px -114px
}
.btnBox .btn_3{
background-position: 0px -154px
}
效果：
示例代码：
矢量图：计算机中显示的图形一般可以分为两大类——矢量图和位图。矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果。Adobe公司的Illustrator、Corel公司的CorelDRAW是众多矢量图形设计软件中的佼佼者。大名鼎鼎的Flash MX制作的动画也是矢量图形动画。
什么是矢量图，具体有什么用？
--------------------------------------------------------------------------------
什么是矢量图，具体有什么用？)
--------------------------------------------------------------------------------
根据信息表示方式分为的矢量图和位图。
矢量图是用一系列计算指令来表示的图，因此矢量图是用数学方法描述的图，本质上是很多个数学表达式的编程语言表达。画矢量图的时候如果速度比较慢，你可以看到绘图的过程。
你可以把矢量图理解为一个“形状”，比如一个圆，一个抛物线等等，因此缩放不会影响其质量。
位图是象素集合。不用我解释了。
用途是：
矢量图一般用来表达比较小的图像，移动，缩放，旋转，拷贝，改变属性都很容易，一般用来做成一个图库，比如很多软件里都有矢量图库，你把它拖出来随便你画多大都行。
