Tema: consulta sprite
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/01/2012, 14:46
Avatar de alfcm
alfcm
 
Fecha de Ingreso: mayo-2009
Mensajes: 291
Antigüedad: 15 años, 6 meses
Puntos: 7
consulta sprite
hola a todos, estoy empezando a usar sprite, pero me tengo una duda

este es mi html con dos divs, y en cada una va una imagen
Código HTML: 
Ver original
  1. <html>
  2. <body>
  3. <div id="header_logo"></div>
  4. <div id="header_title"></div>
  5. </body>
  6. </html>

mi css con sprite es

Código CSS: 
Ver original
  1. #header_logo{
  2.     background:url(../img/misprite.png) no-repeat 0px -230px;
  3.     display:block;
  4.     float:left;
  5.     height:150px;
  6.     width:130px;
  7.     margin-bottom:-40px;
  8. }
  9. #header_title{
  10.     padding:10px;
  11.     padding-top:0;
  12.     width:200px;
  13.     font:bold 35px;
  14.     float:left;
  15.     height:82px;
  16.     background:url(../img/misprite.png) no-repeat 0px -110px;
  17. }

mi duda es en el CSS, tengo #header_logo y #header_title, cada uno esta llamando al archivo misprite.png.

Este es un ejemplo de internet


Código CSS: 
Ver original
  1. /* las propiedades generales */
  2. a.iconos {
  3.   background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
  4.   display: block;
  5.   height: 16px;
  6.   width: 16px;
  7. }
  8.  
  9. /* las propiedades de cada uno de los íconos */
  10. a.icono1 {background-position: 0px 0px;}
  11. a.icono2 {background-position: -16px 0px;}
  12. a.icono3 {background-position: -32px 0px;}
  13.  
  14. /* las propiedades de los íconos con efecto hover */
  15. a.icono1:hover {background-position: 0px -16px;}
  16. a.icono2:hover {background-position: -16px -16px;}
  17. a.icono3:hover {background-position: -32px -16px;}

aqui veo que solamente carga una vez la imagen a.iconos {background:transparent url(URL_IMAGEN) no-repeat 0px 0px;}

NO ESTOY MUY SEGURO SI LO MIO ESTA BIEN APLICADO CON RESPECTO A LOS SPRITE

Agradeceria su respuesta y mas aun con consejos para aplicar los sprite