前端工具HBuilder
浏览器
首先准备图片素材，请下载使用，如下：
因为是5个字母，所以只需要5个span元素即可，代码如下：
给每个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; }效果图如下：
第一个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; }效果图如下：
下面给所有小图标加上鼠标经过效果，首页鼠标状态变成小手，然后添加透明度，这样就有了动态效果，代码如下： span:hover{ cursor: pointer; opacity: 0.2; }效果图如下：
最后展示全部源码，可以直接使用：
background-position抠图一定要给元素加上宽、高
background-position有2个属性一个代表X轴，一个代表Y轴