今天遇见一个很有意的问题,写网页时插入精灵图时用background-position 不起作用,
原代码是这样的:
.sec5_swiper .arrow-left {
display: block;
left: 0;
position: absolute;
background-position: -70px -180px;
width: 60px;
height: 80px;
top: 50%;
margin-top: -40px;
text-indent: -9999px;
background: url(../img/精英爆料.png) no-repeat;
z-index: 9;
}
想了半天不知道哪的问题,最后看了一篇文章才发现了问题
修改后的代码:
.sec5_swiper .arrow-left {
display: block;
left: 0;
position: absolute;
width: 60px;
height: 80px;
top: 50%;
margin-top: -40px;
text-indent: -9999px;
background: url(../img/精英爆料.png) no-repeat;
background-position: -70px -180px;
z-index: 9;
}
代码基本没变,只是改了一下background-position 代码的位置
原因是在css文件中
url(xxxxx ) no-repeat;
是分开定义的。
而且background定义到background-position,background-repeat后面了,把background放在前面问题解决。