CSS裁剪图片
当处于正常网络的情况下，不大于200KB的单张图片载入所需的时间相差无几，将多个图片合并之后会减少图片的数量，进而减少了页面请求图片的次数，页面的加载效率相应会有提高。
用到的样式示例：
.letter_A {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: -30px 0px;
height: 500px;
width: 520px;
}
background-position：x,y表示相对于图片左上角的偏移量，如果x>0,y>0，则图片分别向右、向下移动x像素、y像素；如果x<0,y<0，则图片分别向左、向上移动x像素、y像素。
height和width：从background-position位置开始，裁剪图片的高度和宽度。
实例：
待裁剪图片：
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像裁剪</title>
<style type="text/css">
<!--
.letter_RedA {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 32px;
width: 23px;
}
.letter_RedB {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: -29px 0px;
height: 32px;
width: 23px;
}
.letter_OrangeA {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: 0px -32px;
height: 32px;
width: 23px;
}
.letter_OrangeB {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: -29px -32px;
height: 32px;
width: 23px;
}
.letter_assist {
background-image: url(markers_new.png);
background-repeat: no-repeat;
background-position: -151px -134px;
height: 13px;
width: 11px;
}
-->
</style>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
<tr>
<td width="20%" align="center" valign="bottom"><div class="letter_RedA"/></td>
<td width="20%" align="center" valign="bottom"><div class="letter_RedB"/></td>
<td width="20%" align="center" valign="bottom"><div class="letter_OrangeA"/></td>
<td width="20%" align="center" valign="bottom"><div class="letter_OrangeB"/></td>
<td width="20%" align="center" valign="bottom"><div class="letter_assist"/></td>
</tr>
</table>
</body>
</html>
效果：