Posición de fondo no funciona para sprites CSS

No puedo obtener el CSS de "posición de fondo" para enfocar una parte específica de la imagen, he establecido la posición y puedo cargar todas las imágenes pero el área especificada no muestra. He escrito este código hasta ahora en vano:Posición de fondo no funciona para sprites 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>

Fuente

2011-09-09 Jose Handras

Debido a ul#links li a siendo more specific que, por ejemplo #facebook, la regla background dentro ul#links li a es reemplazar el background-position en #facebook.

División background en background-image y background-repeat es una solución sencilla:

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

Fuente

2011-09-09 10:39:18 thirtydot

Piense que estaba recibiendo un poco confundido entre el estilo del LI y, cosas de la actual A están anulando lo que ha establecido.

aquí es un violín de trabajo para usted - espero que esto se apunta en la dirección correcta :)

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

Fuente

2011-09-09 10:42:47

Posición de fondo no funciona para sprites CSS

Respuesta

Cuestiones relacionadas