CSS背景位置不移动

Question

这个问题有点难以解释。

我正在使用 PNG sprite 制作 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、cart 或其他 36 个图标中的任何一个作为 Icon 类之后的第二个类，我仍然只是获得位于 0px、0px 的背景图像PNG 文件。

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

Chrome 中的开发者工具显示 background-position 属性已正确移动，但在视觉上，图标不正确。

澄清一下，我之前已经成功使用过这种技术很多次，没有任何问题 - 我猜只是度过了糟糕的一天。

有什么想法吗？

Answer 1

问题是div.icon 是more specific 而不是.bino。

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

您可以通过将 div.icon 更改为 .icon 来修复它。