Question

Hola, tengo este css que me ayuda a cojer las imagenes dentro de un png:

.meme1{
    width: 120px;
    height: 110px;
    background: url('https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/851586_127344860783644_1223805928_n.png');
    background-repeat: no-repeat;
}
.meme1.mini{
    background-size: 230px;
    width: 52px;
    height: 50px;
    display: inline-block
}
.meme1.c1{
    background-position-x: 0px;
}
.meme1.c2{
    background-position-x: -135px;
}
.meme1.c2.mini{
    background-position-x: -60px;
}
.meme1.c3{
    background-position-x: -270px;
}
.meme1.c3.mini{
    background-position-x: -120px;
}
.meme1.c4{
    background-position-x: -405px;
}
.meme1.c4.mini{
    background-position-x: -180px;
}
.meme1.l1{
    background-position-y: 7px;
}
.meme1.l1.mini{
    background-position-y: 2px;
}
.meme1.l2{
    background-position-y: -130px;
}
.meme1.l2.mini{
    background-position-y: -60px;
}
.meme1.l3{
    background-position-y: -265px;
}
.meme1.l3.mini{
    background-position-y: -120px;
}
.meme1.l3{
    background-position-y: -405px;
}
.meme1.l3.mini{
    background-position-y: -180px;
}
.meme1.l4{
    background-position-y: -548px;
}
.meme1.l4.mini{
    background-position-y: -240px;
}
.meme1.l5{
    background-position-y: -685px;
}
.meme1.l5.mini{
    background-position-y: -300px;
}
.meme1.l6{
    background-position-y: -821px;
}
.meme1.l6.mini{
    background-position-y: -360px;
}
.meme1.l7{
    background-position-y: -957px;
}
.meme1.l7.mini{
    background-position-y: -420px;
}
.meme1.l8{
    background-position-y: -1095px;
}
.meme1.l8.mini{
    background-position-y: -480px;
}

de esta manera puedo cojer una imagen asi:

<div class="meme1 c1 l1"></div>

Pero no me funciona en firefox, hay alguna manera que funcione sin tener que ponerlo con background-position ?

Answer 1

Hola que tal, en el caso de los Sprites si es necesario aplicar background-position, para lograr este propósito ya que background-position-y es del tipo non-standard por eso su falta de soporte en firefox, también puedes usar un img con position:absolute; y manejar su margin-left, este dentro de un div con overflow:hidden; , saludos.

Answer 2

Hola Jaumesv,

Firefox no soporta los atributos CSS3 background-position-x ni background-position-y porque no son partes del standard. Sin embargo, se puede usar la propiedad background-position con dos valores, que sí es un standard para lograr el efecto. Por ejemplo:

.meme1{
    width: 120px;
    height: 110px;
    background: url('https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/851586_127344860783644_1223805928_n.png');
    background-repeat: no-repeat;
}
...
.meme1.c1_l1{
    background-position: 0 7px;    
}
.meme1.c1_l7{
    background-position: 0 -957px;    
}
.meme1.c2_l5{
    background-position: -137px -685px;    
}

y en el HTML:

<div class="meme1 c1_l1"></div>
<div class="meme1 c1_l7"></div>
<div class="meme1 c2_l5"></div>

Te perdés el poder definir las coordenadas usando dos clases, pero queda más compatible ya que todos los navegadores soportan esta forma de usar los sprites. Por esto verás que la mayoría de los sprites son solo una línea vertical u horizontal de imágenes, de manera tal de no tener que trabajar con las 2 coordenadas.

Te dejo una muestra andando en: http://jsfiddle.net/S6k4f/

Saludos!