css使用background-position定位小图标
1、首先准备图片素材，请下载使用，如下：
2、因为是5个字母，所以只需要5个span元素即可，代码如下：
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
3、给每个span加上相同的背景图片，就是素材图片，代码如下：
span {
background: url(../img/abcd.jpg) no-repeat;
float: left;
}
然后给第一个span定位出小图标，我们可以用span:first-child伪类来定位第一个元素，代码如下：
span:first-child {
width: 108px;
height: 111px;
background-position: -367px -416px;
}
效果图如下：
4、第一个span定位出来了，下面4个span原理相同，代码如下：
span:nth-child(2) {
width: 110px;
height: 113px;
background-position: -369px -275px;
}
span:nth-child(3) {
width: 97px;
height: 108px;
background-position: -363px -7px;
}
span:nth-child(4) {
width: 110px;
height: 110px;
background-position: 0px -9px;
}
span:nth-child(5) {
width: 110px;
height: 110px;
background-position: -366px -556px;
}
效果图如下：
5、下面给所有小图标加上鼠标经过效果，首页鼠标状态变成小手，然后添加透明度，这样就有了动态效果，代码如下：
span:hover{
cursor: pointer;
opacity: 0.2;
}
效果图如下：
6、最后展示全部源码，可以直接使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
span {
background: url(../img/abcd.jpg) no-repeat;
float: left;
}
span:first-child {
width: 108px;
height: 111px;
background-position: -367px -416px;
}
span:nth-child(2) {
width: 110px;
height: 113px;
background-position: -369px -275px;
}
span:nth-child(3) {
width: 97px;
height: 108px;
background-position: -363px -7px;
}
span:nth-child(4) {
width: 110px;
height: 110px;
background-position: 0px -9px;
}
span:nth-child(5) {
width: 110px;
height: 110px;
background-position: -366px -556px;
}
span:hover{
cursor: pointer;
opacity: 0.2;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>