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

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

Chrome中的开发者工具显示背景位置属性已正确移位，但在视觉上，图标不正确。

只是为了澄清一下，我之前已成功使用过这种技术很多次没问题 - 我猜错了。

有什么想法吗？

Answer 1

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

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

您可以将div.icon更改为.icon。

来解决此问题

CSS背景位置不变

1 个答案: