雪碧（精灵）图

要求显示效果：（轮播图导航栏效果）

页面结构：

<ul class="list-box"><li></li><li></li><li></li><li></li><li></li>
</ul>

样式：

.list-box>li{float: left;width: 70px;height: 65px;background-image: url(./img/daohang.png);background-position:0 0;background-repeat: no-repeat;
}
.list-box>li:nth-child(2){background-position-x: -100px;
}
.list-box>li:nth-child(3){background-position-x: -210px;
}
.list-box>li:nth-child(4){background-position-x: -310px;
}
.list-box>li:nth-child(5){background-position-x: -395px;
}.list-box>li:hover{background-position-y: -110px;
}

实现原理：每个li背景图都为同一张，对应li给一个宽高width: 70px;height: 165px;先显示第一行，在不设置background-position-x时，默认显示第一行图片。
相当于每个背景图都是叠着放置的：

故：移动背景图片background-position-x即可改变对应可视区域的图像。