展示背景图片的一部分
显示背景图片的一部分
如果在页面山有很多小图标，可以把它们集中到一张图片当中。
实现原理：根据CSS样式，选择背景图片坐标位子，就能准确定位出显示的图片
优点：避免了维护多个文件，只需要管理一个图片文件
显示的效果全部由CSS控制
缺点：一次需要下载相对较大的图片，浪费流量，加大了代码的难度
<!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>