CSS背景位置没有移动

我正在使用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，销售，购物车或精灵中的其他36个图标作为Icon类之后的第二个类，我仍然只获取位于PNG文件的0px，0px的背景图像。

奇怪的部分是，它在Dreamweaver设计视图中完美地显示，但只要我去实时查看或在Chrome/Safari等预览，图标都切换到默认图标，而不是被移位。

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

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

任何想法？

来源

2011-04-11 Tobey

问题是div.icon是more specific比.bino。

的background规则是简写（其中包括）该background-position财产，所以background财产上div.icon阻止您的不同被施加background-position规则。

您可以通过将div.icon更改为.icon来解决此问题。

来源

2011-04-11 04:31:47 thirtydot

谢谢！这解决了它。 – Tobey 2011-04-11 04:34:48

+1 - 所以你有一些点，因为你可能不会得到这个勾号。 @Tobey - 接受thirtydot的答案，如果它适合你。如果您不打算在其中定义任何其他属性，则还应该将背景更改为background-image。 – 2011-04-11 08:32:21

@我的头痛：谢谢你:) – thirtydot 2011-04-11 09:36:00

CSS背景位置没有移动

回答

相关问题