背景位置不適用於CSS精靈

我無法獲得「背景位置」CSS來定位圖像的特定部分，我已經設置了位置並可以獲取所有要加載的圖像，但指定的區域不顯示。到目前爲止，我寫了這個代碼無濟於事：背景位置不適用於CSS精靈

<head> 

<style type="text/css"> 

ul#links { 
    list-style: none; 
} 

ul#links li a{ 
    float: left; 
    padding: 40px; 
    background: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png') no-repeat; 
} 

#customlink { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -0px ; 
    background-repeat: no-repeat; 
} 

#rss { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -0px; 
    background-repeat:no-repeat; 
} 

#facebook { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -24px; 
    background-repeat:no-repeat; 
} 

#flickr { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -24px; 
    background-repeat:no-repeat; 
} 

#twitter { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -48px; 
    background-repeat:no-repeat; 
} 

#linkedin { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -48px; 
    background-repeat:no-repeat; 
} 

#google { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -72px; 
    background-repeat:no-repeat; 
} 

#foursquare { 
    width: 24px; 
    height: 24px; 
    background-position: -72px -0px; 
    background-repeat:no-repeat; 
} 

</style> 

</head> 

<body> 
    <ul id="links"> 
    <h2>Social Networks</h2> 
    <li><a href="" id="customlink"></a></li> 
    <li><a href="" id="rss"></a></li> 
    <li><a href=""id="facebook"></a></li> 
    <li><a href=""id="flickr"></a></li> 
    <li><a href="" id="twitter"></a></li> 
    <li><a href="" id="linkedin"></a></li> 
    <li><a href=""id="google"></a></li> 
    <li><a href=""id="foursquare"></li> 
    </ul> 

</body> 
</html>

來源

2011-09-09 Jose Handras

由於ul#links li a爲more specific比例如#facebook，裏面ul#links li a的background規則覆蓋上#facebook的background-position。

拆分background到background-image和background-repeat是一個簡單的解決辦法：

ul#links li a{ 
    float: left; 
    background-image: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png'); 
    background-repeat: no-repeat; 
    width: 24px; 
    height: 24px; 
} 
#facebook { 
    background-position: -0px -24px; 
}

來源

2011-09-09 10:39:18 thirtydot

覺得你得到的造型LI的和實際的A的，東西都重寫你設置什麼之間有點糊塗了。

這裏是你工作的小提琴 - 希望這點你在正確的方向:)

http://jsfiddle.net/JAahh/1/

來源

2011-09-09 10:42:47

背景位置不適用於CSS精靈

回答

相關問題