Arka plan konumu CSS spriteları için çalışmıyor

Görüntünün belirli bir bölümünü hedeflemek için "arka plan konumu" CSS'yi alamıyorum, konumu ayarladım ve tüm resimlerin yüklenmesini ancak alanın belirlenmesini sağlayabiliyorum göstermez. Ben boşuna şimdiye kadar bu kod yazdım:Arka plan konumu CSS spriteları için çalışmıyor

<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>

kaynak

2011-09-09 Jose Handras

nedeniyle örneğin #facebook için daha more specific olmak ul#links li a için, ul#links li a iç background kural #facebook üzerinde background-position geçersiz olduğunu.

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; 
}

kaynak

2011-09-09 10:39:18 thirtydot

LI en ve gerçek A'nın, işler belirlenmiş olduğunuz neyi geçersiz kılma stil arasında biraz karıştı edildi düşünün: background-image ve background-repeat içine

Bölme background basit bir düzeltmedir. Burada

sizin için çalışan bir keman olduğunu - bu doğru yönde :)

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

sizi işaret umut

kaynak

2011-09-09 10:42:47

Arka plan konumu CSS spriteları için çalışmıyor

cevap

İlgili konular