以拼写名字----AN为例（效果：你想要用到的图片放在一张图片上，通过选择这张图片上的位置来获取你想要的图片，减少请求次数）
1、背景图
2、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵图--自己名字</title>
<link rel="stylesheet" href="css/sublime.css"/>
<style type="text/css">
span{
background: url(images/abcd.png) no-repeat;
float: left;
}
span:first-child{ /* 也可以通过class是选择器或者id选择器设置样式*/
width: 108px;
height: 109px;
background-position: 0 -9px; /*位置坐标可以通过ps或着FW获得*/
}
span:nth-child(2){
width: 110px;
height: 113px;
background-position:-256px -279px;
}
</style>
</head>
<body>
<span class='h' id='h'></span>
<span class='j' id='j'></span>
</body>
</html>
3、代码结构
4、页面展示
5、工具：sublime