雪碧(精灵)图
要求显示效果:(轮播图导航栏效果)
页面结构:
<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即可改变对应可视区域的图像。