这种方法看似繁琐，但却是非常有实用价值的。
首先，CSS Sprites 能较少 HTTP 请求次数。
我们知道，HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放，每一次调用都会产生 HTTP 请求，一定程度上增加了服务器的负担。而单个背景图的设计方法，只需请求一次即可取回背景图片。很多大型网站，包括雅虎，新浪等，都采用了 CSS
其次，CSS Sprites 能防止背景图片延迟加载。
有时在点击以图片作背景的按钮时会发现，鼠标悬停的时刻才会触发浏览器下载背景图片，这是非常差劲的用户体验。但如果将图片存放与单个文件，就能避免延迟加载。因为在打开网页的首次请求中，图片已经加载完毕。
然而，使用单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐，缺乏灵活性。在雅虎开发小组的 YUI
总之，CSS Sprites 有利也有弊。在追求性能的前提下，CSS
网页中经常涉及到很多小图片，一般能达到几十个，如果每个小图片来一次http请求，请求个数多大几十个。使用css sprites技术服务器端只需要将一个包含所有小图片的图片发送过来，由客户端使用css的背景图片及背景图片位置属性来显示图片即可。如此一来大大减少了服务器端的压力。
如今css sprites技术已经被很多大型网站使用，使用火狐的firebug观察google搜索页面的请求，会发送服务器端返回如下图片，此图片中包含了搜索页面大部分图片
而google log的html源码为
Html代码
<a title="Google 首页" href="http://www.google.com.hk/webhp?hl=zh-CN" id="logo">Google<img width="167" height="318" alt="" src="/images/nav_logo83.png"></a>
<a title="Google 首页" href="http://www.google.com.hk/webhp?hl=zh-CN" id="logo">Google<img width="167" height="318" alt="" src="/images/nav_logo83.png"></a>其中logo对应css为
Html代码
1. #logo {
2. display: block;
3. height: 41px;
4. margin: 0;
5. overflow: hidden;
6. position: relative;
7. width: 114px;
8. }
9. #logo img {
10. background: none repeat scroll 0 0 #F5F5F5;
11. border: 0 none;
12. left: 0;
13. position: absolute;
14. top: -41px;
15. }
#logo {
display: block;
height: 41px;
margin: 0;
overflow: hidden;
position: relative;
width: 114px;
}
#logo img {
background: none repeat scroll 0 0 #F5F5F5;
border: 0 none;
left: 0;
position: absolute;
top: -41px;
}
参考了如上代码，自己试了下
原图片包含四个小图标，每个小图标大小为9px*9px，即大图片大小为18px*18px，如下
需要的效果，及在html页面每一行显示一个小图标
css源码
Java代码
1. #plusImageButton {
2. display:block;
3. overflow:hidden;
4. position:relative;
5. width:9px;
6. height:9px;
7. margin:5px 5px 5px 5px;
8. }
9. #plusImageButton img{
10. border:none;
11. position:absolute;
12. }
#plusImageButton {
display:block;
overflow:hidden;
position:relative;
width:9px;
height:9px;
margin:5px 5px 5px 5px;
}
#plusImageButton img{
border:none;
position:absolute;
}注意其中plusImageButton的width、height为小图片的长和宽
html源码：
Html代码
Html代码
<table>
<tr>
<td>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:0px; top:-9px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:-9px; top:-9px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:0px; top:0px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:-9px; top:0px" src="../images/plusAndMinus.png"/></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:0px; top:-9px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:-9px; top:-9px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:0px; top:0px;" src="../images/plusAndMinus.png"/></a>
<a id="plusImageButton"> <img width="18px" height="18px" style="left:-9px; top:0px" src="../images/plusAndMinus.png"/></a>
</td>
</tr>
</table>注意其中img的width为大图片的长，height为大图片的宽。style中的left和top是为了控制显示哪个小图片，位置相对于大图片的左上角顶点而言
参考：
http://www.mangguo.org/css-sprites-image-cut-and-optimize-skill/
http://www.mangguo.org/css-foreground-image-merge-technology/
