原文：http://hbiao68.iteye.com/blog/1407337
如果在页面山有很多小图标，可以把它们集中到一张图片当中。
实现原理：根据CSS样式，选择背景图片坐标位子，就能准确定位出显示的图片
优点：避免了维护多个文件，只需要管理一个图片文件
缺点：一次需要下载相对较大的图片，浪费流量，加大了代码的难度
Js代码 
-
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
<html
xmlns="http://www.w3.org/1999/xhtml"> -
<head>
-
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312" /> -
<style
type="text/css"> -
.test{
-
width: 24px; -
height: 22px; -
display: inline-block; -
background: url(img/ico.png?v=20120214) -10px -107px no-repeat; -
vertical-align: middle; -
}
-
</style>
-
<script
src="lib/jquery-1.6.4.min.js" type="text/javascript"></script> -
<script
type="text/javascript"> -
-
-
</script>
-
<title>无标题文档</title>
-
</head>
-
<div>background:url() -10px -107px no-repeat; -
<p>-10px表示距离图片左顶点的宽度 -
<p>-107px表示距离图片左顶点的高度 -
<p>width: 24px; 目的是为了设置显示div的宽度 -
<p>height:22px; 目的是为了设置显示div的高度 -
</div> -
<div class="test"></div> -
<body>
-
</body>
-
</html>