主要的实现方式是
说明图片为雪碧图
1、将一张背景1图片给a标签2、将背景2设置给span标签并不设置宽度
3同样的方式给:hover再设置不同的背景12
a标签代码片段li
a {
height: 33px;
/* line-height:75px; */
color: orange;
text-decoration: none;
background: url('bg.png') no-repeat 0px -192px;
padding-left: 10px;
display: inline-block;
span标签代码片段:
span {
height: 33px;
line-height: 33px;
text-decoration: none;
background: url('bg.png') repeat right -192px;
padding-right: 10px;
display: inline-block;
}
a:hover span {
height: 31px;
color: yellowgreen;
background: url('bg.png') repeat right -144px;
}