1

这个问题有点难以解释。

我正在使用 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 类之后的第二个类，我仍然只是获得位于 PNG 文件的 0px、0px 处的背景图像.

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

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

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

有任何想法吗？

4

1 回答 1

3

问题是div.icon它比..bino

该background规则是（除其他外）该background-position属性的简写，因此该background属性div.icon会阻止您应用不同的background-position规则。

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

于 2011-04-11T04:31:47.410 回答