css中设置background-position失效，希望解答？

问题描述

问 题

css中设置background-position失效，希望解答？

雪碧图

html

    <div class = "cooper">
        <ul class="company">
            <li class="cat-1"><a href=""></a></li>
            <li class="cat-2"><a href=""></a></li>
            <li class="cat-3"><a href=""></a></li>
        </ul>
    </div>

css

.company li{
    float: left;   
}

.company li a{
    display:inline-block;
    height: 70px; background: url(../imgs/icons/cooperation.gif)  no-repeat;
    
}

.cat-1 a{width: 132px;background-position:0 0;}
.cat-2 a{width: 110px;background-position: -132px 0px;}

效果：

图片的background-position为什么会失效？造成不能定位

解决方案

请注意CSS的优先级关系啊

.company li a 的优先级 高于  .cat-2 a

所以 你设置的background-position 没有生效

你可以看下这篇文章

https://segmentfault.com/a/1190000000453851

这篇关于css中设置background-position失效，希望解答？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！