background-position-y non funziona in Firefox (tramite CSS)?

Question

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

Chiunque ha qualche soluzione?

Answer 1

Se la posizione-x è 0, non c'è altra soluzione che la scrittura:

background-position: 0 100px; 

background-position-x è un'implementazione non standard provenienti da IE. Chrome ha copiato, ma purtroppo non firefox ...

Tuttavia questa soluzione non può essere perfetto se si dispone di sprite separate su un grande sfondo, con le righe e colonne che significano cose diverse ... (ad esempio loghi diversi su ogni riga, selezionata/posizionata a destra, semplice a sinistra) In tal caso, suggerirei di separare l'immagine grande in immagini separate o scrivere le diverse combinazioni nel CSS ... A seconda del numero di sprite, uno o l'altra potrebbe essere la scelta migliore.

Answer 2

Utilizzare questa

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; 

Answer 3

Tuttavia questa soluzione non può essere perfetto se si dispone di sprite separate su un grande sfondo, con le righe e colonne che significa cose diverse. .. (ad esempio diversi loghi su ogni riga, selezionati/posizionati a destra, semplici a sinistra) In tal caso, suggerirei di separare l'immagine grande in immagini separate, o scrivere le diverse combinazioni nel CSS ... sul numero di sprite, l'una o l'altra potrebbe essere la scelta migliore.

miniera presenta il problema esatto dichiarata dal Orabîg che ha un tavolo come sprite che ha colonne e righe.

Qui di seguito è quello che ho usato come una soluzione 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'); 
    } 
    });  
} 

Answer 4

assicurarsi di indicare esplicitamente la misura di compensazione vostra. Oggi mi sono imbattuto in questo problema esatto, ed è dovuto al modo in cui i browser interpretano i valori forniti nel CSS.

Ad esempio, questo funziona perfettamente in Chrome:

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

Ma, per Firefox e IE, è necessario scrivere:

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

Spero che questo aiuti.

Answer 5

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

non funziona se si desidera uno sfondo insieme all'immagine. Così utilizzare:

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

Answer 6

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

Answer 7

Firefox 49 will be released supporto -con per background-position-[xy] -in settembre 2016.Per le versioni precedenti fino a 31, è possibile utilizzare CSS variables per ottenere il posizionamento dello sfondo su un singolo asse simile all'utilizzo di background-position-x o background-position-y. Le variabili CSS hanno raggiunto lo stato di Candidate Recommendation in December 2015.

Il seguente è un esempio completamente cross-browser di modificare la posizione bassa assi per le immagini sprite sulla comparsa:

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

Answer 8

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

Si dovrebbe seguire questo tipo di sintassi:

background-position: 10px 15px; 

100% Soluzione lavoro

Answer 9

Perché non si utilizza background-position direttamente?

Usa:

background-position : 40% 56%; 

Invece di:

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