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背景位置沒有移動

回答

相關問題