Nel mio codice background-position-ynon funziona. In Chrome va bene, ma non funziona in Firefox.

Qualcuno ha qualche soluzione?

Se la tua posizione x è 0, non c'è altra soluzione che scrivere:

background-position: 0 100px;

background-position-x è un'implementazione non standard proveniente da IE. Chrome l'ha copiato, ma purtroppo non Firefox ...

Tuttavia questa soluzione potrebbe non essere perfetta se hai sprite separati su uno sfondo grande, con righe e colonne che significano cose diverse ... (ad esempio loghi diversi su ogni riga, selezionati / posizionati a destra, semplici a sinistra) In tal caso, Suggerirei di separare il quadro generale in immagini separate o di scrivere le diverse combinazioni nel CSS ... A seconda del numero di sprite, l'uno o l'altro potrebbe essere la scelta migliore.

Usa questo

background: url("path-to-url.png") 89px 78px no-repeat;

Invece di questo

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Firefox 49 verrà rilasciato, con supporto per background-position-[xy], a settembre 2016. Per le versioni precedenti fino alla 31, è possibile utilizzare le variabili CSS per ottenere il posizionamento dello sfondo su un singolo asse simile all'utilizzo di background-position-xo background-position-y. Le variabili CSS hanno raggiunto lo stato di raccomandazione del candidato nel dicembre 2015 .

Di seguito è riportato un esempio completamente cross-browser di modifica degli assi di posizione dello sfondo per le immagini sprite al passaggio del mouse:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }

background-position-y :10px;è che non funziona nel browser web Firefox.

Dovresti seguire questo tipo di sintassi:

background-position: 10px 15px;

10px è limitato a "position-x" e 15px è limitato a "position-y"

Soluzione funzionante al 100%

Segui questo URL per ulteriori esempi

Perché non usi la posizione dello sfondo direttamente la ?

Uso:

background-position : 40% 56%;

Invece di:

background-position-x : 40%;
background-position-y : 56%

background: url("path") 89px 78px no-repeat;

Non funzionerà se vuoi uno sfondo insieme all'immagine. Quindi usa:

background: orange url("path-to-image.png") 89px 78px no-repeat;

Questo ha funzionato per me:

a {
    background-image: url(/image.jpg);
    width: 228px;
    height: 78px;
    display: inline-block;
}

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}

Assicurati di dichiarare esplicitamente la misura del tuo offset. Oggi mi sono imbattuto in questo problema esatto, ed era dovuto al modo in cui i browser interpretano i valori che fornisci nel tuo CSS.

Ad esempio, funziona perfettamente in Chrome:

background: url("my-image.png") 100 100 no-repeat;

Ma, per Firefox e IE, devi scrivere:

background: url("my-image.png") 100px 100px no-repeat;

Spero che sia di aiuto.

Tuttavia questa soluzione potrebbe non essere perfetta se hai sprite separati su uno sfondo grande, con righe e colonne che significano cose diverse ... (ad esempio loghi diversi su ogni riga, selezionati / posizionati a destra, semplici a sinistra) In tal caso, Suggerirei di separare il quadro generale in immagini separate o di scrivere le diverse combinazioni nel CSS ... A seconda del numero di sprite, l'uno o l'altro potrebbe essere la scelta migliore.

Il mio ha il problema esatto come affermato da Orabîg che ha una tabella come sprite che ha colonne e righe.

Di seguito è riportato ciò che ho usato come soluzione alternativa utilizzando js

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}