Modifica della posizione di sfondo CSS solo sull'asse Y.

Question

Ok ... quindi ecco il problema.

Ho un'immagine CSS sprite composta da dieci (10) icone 25px x 25px disposte orizzontalmente, risultando in un'immagine sprite di 250px di larghezza.

Sto usando queste immagini 25x25 come miniature. Sto cercando di avere un'opacità del 30% su queste immagini nella vista INIZIALE e quando un utente ci passa sopra, l'opacità deve essere del 100% (1).

Quindi quello che ho fatto è stato creare una SECONDA fila di immagini con la loro opacità al 30% - quindi ora ho un'immagine sprite di 250px x 50px. I primi 25px al 100% e quelli inferiori a 25px al 30%.

Ho impostato HTML come segue:

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

e 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; }

Tuttavia, questo non sembra funzionare purtroppo, poiché background-position-y NON è supportato in Firefox (o non è uno standard, ma è specifico di IE).

L'idea è che vogliamo (solo) SPOSTARE l'immagine di sprite SU (lungo l'asse y) e lasciare l'asse x così com'è (o è stato impostato nelle classi precedenti).

Se non esiste una semplice soluzione CSS per questo - questo effetto di opacità può essere fatto con JQUERY? Quindi i pollici verrebbero caricati al 30% di opacità e passerebbero al 100% di opacità quando l'utente si sposta?

Mille grazie,

M.

Answer 1

Non è necessario un secondo set di icone né l'uso di JavaScript per ottenere l'effetto desiderato.

Come sottolineato da Lou, usa opacità per rendere le tue icone del 30% o completamente visibili. Non c'è più bisogno di pasticciare con background-position .

Vai avanti e definisci i tuoi stili di conseguenza come segue:

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; }

Se sei preoccupato per la convalida del tuo codice CSS, prendi le parti specifiche di IE (che non verranno convalidate) e inseriscile in file CSS specificamente mirati tramite commenti condizionali .

Spero che sia d'aiuto.

Answer 2

Credo che la risposta di Lou faccia quello che vuoi che faccia: devi solo definire una classe per ogni stato e impostare entrambe le coordinate xey.

Se volevi l'effetto dello sbiadimento, jQuery ti dà un modo per farlo . Questo potrebbe probabilmente darti quello che vuoi se è il caso:

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

MODIFICA : aggiornato in base al feedback. L'opacità iniziale è ora impostata.

Answer 3

modo semplice

{background-position:100% 4px;}

puoi usare la parentela con pixel per sostituire la proprietà background-position-y

Answer 4

Nota: affinché funzioni in Mozilla, è necessario impostare la proprietà dell'allegato in background a "riparato".

Ha qualche rilevanza?

-

Hai solo 10 immagini, basta definire una classe css per ognuna. In questo modo è possibile specificare il relativo x coord.

ps. Spero che tu non stia usando quel css esatto, applicando quello stile a: hover si applicherebbe a tutti i link sulla pagina. Dovresti applicarlo solo allo stile di imaging.

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; }

Esiste anche opacità ..

Answer 5

Alcune piccole omissioni, errori di battitura e codice non necessario nell'esempio precedente. Immagino che il tuo codice potrebbe assomigliare a questo:

<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>