css background-position no funciona

Tengo 3 etiquetas etiquetadas como "botones para pasar el cursor".css background-position no funciona

<div id="buttons"> 
    <a class='button' id='but1' href=''></a> 
    <a class='button' id='but2' href=''></a> 
    <a class='button' id='but3' href=''></a> 
</div>

Cada botón está recibiendo su imagen inicial de la CSS de la siguiente manera:

.button{ 
    background:url(theimage.jpg); 
    width;height; etc... 
}

Ahora, cuando intento para asignar la posición inicial de antecedentes para cada elemento específico como tal:

#but1{ 
    background-position:0 0; 
} 
#but1:hover{ 
    background-position:0 -50px; 
} 

#but2{ 
    background-position:0 -100px; 
} 
#but2:hover{ 
    background-position:0 -150px; 
} 

#but3{ 
    background-position:0 -200px; 
} 
#but3:hover{ 
    background-position:0 -250px; 
}

El problema: cada botón se predetermina a la posición 0 0

Tenga en cuenta que las posiciones de desplazamiento funcionan como se esperaba.

Estoy un poco enfermo en este momento, así que esto es probablemente un descuido, pero he estado esperando esto durante una hora y no puedo entenderlo.

¿Alguna idea?

Gracias

EDITAR amor Pastebin http://pastebin.com/SeZkjmHa

Fuente

2011-05-18 qwerty

Ha pasado un tiempo desde que usé sprites ... pero ¿no deberían los valores ser positivos y no negativos? – JCOC611

@ jcoc611 Dado que voy de abajo hacia arriba estoy usando negativos – qwerty

Correcto ... pero todavía creo que vale la pena intentarlo ... también ... un enlace a un sitio web o jsfiddle sería increíble. – JCOC611

No estoy reproduciendo su problema. ¿Qué navegador?

pensamiento

inicial (sin ver un caso de error) es cambiar su definición inicial de antecedentes de un completo 'background:' a una declaración Imagen de fondo:

.button{ 
    background-image:url(theimage.jpg); 
    width;height; etc... 
}

por el fondo de la configuración, que es un contenedor para background-position, algunos navegadores pueden tener problemas con problemas de especificidad allí.

Fuente

2011-05-18 00:42:52

Lo mismo, no pudo encontrar un problema. Yo trataría ^. –

Gracias por la respuesta. Intenté eso pero no alegría. Me vuelvo loco porque no recibo ningún error de CSS informado por el complemento de desarrollo web (firefox) – qwerty

Sí, tendrás que publicar un ejemplo. Creo que tendrías una respuesta en 2 minutos si lo hicieras. –

Ha considerado obtenerlo en <ul> <li> </li> <ul>? Es mucho más fácil de esta manera. como:

<ul class="buttons"> 
    <li href=''></a> 
    <li href=''></a> 
    <li href=''></a> 
</ul>

para la parte css

.buttons li{ 
    background:url(theimage.jpg); 
    width;height; etc... 
} 

.buttons li:hover{ 
    background-position:0 0; 
}

ver si funciona;)

Fuente

2011-05-18 00:58:35 woninana

No creo que li: hover funcione en IE – qwerty

me funciona, ¿qué versión de IE estás usando? – woninana

Predigo IE7 o menos. –

funciona si separamos las propiedades de fondo, http://jsfiddle.net/kTYyU/.

#buttons .button{ 
    display:block; 
    position:relative; 
    float:left; 
    width:250px; 
    height:80px; 
    padding-left:20px; 
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png); 
    background-repeat:no-repeat; 
}

Fuente

2011-05-18 01:06:09

creo que el problema se deriva de declarar una propiedad abreviada incompleta en su clase .button.

fija Un ejemplo se puede ver en jsFiddle: http://jsfiddle.net/rRVBL/

Fuente

2011-05-18 01:14:58 rjb

dividir el "fondo" propiedad abreviada.

Si omite una de las entradas en una propiedad de taquigrafía, la entrada omitida se restablece al valor predeterminado en lugar de simplemente dejarla en blanco.

Así que lo que está sucediendo es más o menos el equivalente a esto:

#someElement { 
    background-position:0 -100px; 
    background:url(image.png) no-repeat; 
    /* ^--- omitted background-position gets reset to the default */ 
}

Romper la taquigrafía en diferentes entradas:

#someElement { 
    background-image:url(image.png); 
    background-repeat:no-repeat; 
}

EDIT: En su código, los background-position valores vienen después los valores background ... Pero estoy bastante seguro de que el selector #buttons .button es más específico que el #retain-our-firm y selectores similares, lo que significa que su regla prevalece sobre los demás, aunque los demás vienen después.

Fuente

2011-05-18 01:36:17 DavidJCobb

Sé que esto fue preguntado hace años, pero creo que tengo la solución.

Tuve exactamente el mismo problema, el posicionamiento funcionaba en Chrome, etc., pero no en Firefox.

tomó tanto tiempo para averiguar la respuesta tonta,

background-position  : 7 4;

funcionará en cromo, pero no Firefox ..

background-position  : 7px 4px;

funcionará en ambos.

Fuente

2013-04-11 05:25:20 Corey

Para aclarar, es la falta de "px" que lo está rompiendo – Corey

css background-position no funciona

Respuesta

Cuestiones relacionadas