CSS背景位置不变

Question

这个问题有点难以解释。

我正在使用PNG精灵来制作48x48px图标，并按班级移动背景。

例如，

<style>

div.icon {
    width:48px;
    height:48px;
    background: url(../img/48sprite.png);
}

.cart { background-position: -96px -336px; }
.sale { background-position: -96px -384px; }
.bino { background-position: -96px -432px; }

</style>

（这些背景位置平移类大约有35个以上，用于不同的图标。）

<div class="widelist">

<div class="widelist-itemwrap">

<div class="icon bino left"></div>

  <div class="widelist-content left">
    <h4>Widelist Heading</h4>
    <p>Widelist content</p>
  </div>

</div>

</div>

问题是，无论我是否将bino，sale，car或其他36个图标放在Sprite中，作为继Icon类之后的第二类，我仍然只得到位于PNG文件的0px，0px处的背景图像。

奇怪的是，它在Dreamweaver设计视图中完美显示，但是一旦我进入实时视图或在Chrome / Safari等中预览时，图标全部切换为默认图标，而不是移动。

Chrome中的开发人员工具显示背景位置属性已正确移动，但从外观上看，该图标不正确。

为了明确起见，我已经成功地多次使用了该技术，而且没有出现问题-我猜今天过得很糟糕。

有任何想法吗？

Answer 1

问题在于div.icon比.bino 更具体 。

background规则（ div.icon是background-position属性）是background规则的简写，因此div.icon上的background属性阻止应用您不同的background-position规则。

您可以通过更改修复div.icon只是.icon 。