पृष्ठभूमि-स्थिति सीएसएस के लिए काम नहीं कर रहा sprites

मैं छवि के एक विशिष्ट भाग लक्षित करने के लिए "पृष्ठभूमि स्थिति" सीएसएस नहीं मिल सकता है, मैं स्थिति निर्धारित किया है और सभी छवियों को लोड करने के लिए प्राप्त कर सकते हैं, लेकिन क्षेत्र निर्दिष्ट दिखाया नहीं जाता। मैं कोई लाभ नहीं हुआ अब तक इस कोड लिखा है:पृष्ठभूमि-स्थिति सीएसएस के लिए काम नहीं कर रहा sprites

<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 उदाहरण #facebook के लिए की तुलना में more specific किया जा रहा है, ul#links li a अंदर background नियम #facebook पर background-position अधिभावी है।

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