Cambio de posición de fondo de CSS solo en el eje Y

Question

Ok ... así que aquí está el problema.

Tengo una imagen de sprite CSS compuesta por diez (10) íconos de 25px x 25px dispuestos horizontalmente, lo que resulta en una imagen de sprite de 250px de ancho.

Estoy usando estas imágenes de 25x25 como miniaturas. Estoy buscando tener una opacidad del 30% en estas imágenes en vista INICIAL y cuando un usuario se cierne sobre ellas, la opacidad debe ser del 100% (1).

Entonces, lo que hice fue crear una SEGUNDA fila de imágenes con su opacidad al 30%, así que ahora tengo una imagen de sprite de 250px x 50px. Los 25px superiores al 100% y los 25px inferiores al 30%.

Configuro HTML de la siguiente manera:

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

y el CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

Sin embargo, esto no parece funcionar, lamentablemente, ya que background-position-y NO es compatible con Firefox (o no es un estándar, pero es específico de IE).

La idea es que (solo) queremos CAMBIAR la imagen del sprite hacia ARRIBA (a lo largo del eje y) y dejar el eje x como está (o se estableció en las clases anteriores).

Si no hay una solución CSS simple para esto, ¿se puede hacer este efecto de opacidad con JQUERY? ¿Entonces los pulgares se cargarían al 30% de opacidad y pasarían al 100% de opacidad cuando el usuario se desplaza?

Muchas gracias,

M.

Answer 1

No necesita un segundo conjunto de iconos ni el uso de JavaScript para lograr el efecto deseado.

Como lo señaló Lou, use opacity para que sus iconos sean del 30% o completamente visibles. Ya no es necesario meterse con background-position .

Simplemente siga adelante y defina sus estilos de acuerdo con lo siguiente:

a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }

Si le preocupa la validación de su código CSS, tome las partes específicas de IE (que no validarán) y colóquelas en archivos CSS dirigidos específicamente a través de comentarios condicionales .

Espero que ayude.

Answer 2

Creo que la respuesta de Lou hace lo que usted quiere que haga: solo tiene que definir una clase para cada estado y establecer las coordenadas x e y.

Si querías el efecto de desvanecimiento, entonces jQuery te da la manera de hacerlo . Probablemente esto podría conseguirte lo que deseas si ese es el caso:

$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
        $(this).fadeTo(300, 1.0);
    },
    function() {
        $(this).fadeTo(1, 0.33);
    }
);

EDIT : actualización basada en comentarios. La opacidad inicial ya está establecida.

Answer 3

manera fácil

{background-position:100% 4px;}

puede utilizar la paternidad con píxeles para sustituir la propiedad background-position-y

Answer 4

Nota: Para que esto funcione en Mozilla, la propiedad de fondo adjunto debe establecerse a " fijo " ;.

¿Eso tiene alguna relación?

-

Solo tienes 10 imágenes, solo define una clase css para cada una. De esa manera puede especificar la coordenada x relativa.

ps. Espero que no estés usando el css exacto, aplicando ese estilo a: hover se aplicaría a todos los enlaces de la página. Deberías aplicarlo solo al estilo de imagen.

a { display: block;
    float: left;
    width: 25px;
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat;
  }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }

También hay opacity ..

Answer 5

Algunas pequeñas omisiones, errores tipográficos y códigos innecesarios en el ejemplo anterior. Supongo que su código podría verse así:

<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb2"></a>
<a href="largeimage2.jpg" class="thumb3"></a>