entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Background-position-x en Firefox

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 ?

2 Respuestas

1voto

mrczrt Puntos6920

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.

1voto

Leonardo-Tadei Puntos227020

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!

0voto

Jaumesv comentado

Ya pero con esa forma tendria que hacerlo 44 veces que son las imagenes que hay, y separando el x de la y con 10 veces basta, es por eso. Pero si no hay ninguna otra forma tendre que hacerlo asi...

0voto

Leonardo-Tadei comentado

Por eso te decía que te perdés definirlo de esa manera y tenés que crear una clase para cada uno de los sprites :-(
La ventaja es que funcionará en culaquier navegador y no depende de cosas puntuales por fuera del standard.

PD: vale copiar y pegar para ahorrarse trabajo ;-)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta