In meinem Code background-position-yfunktioniert das nicht. In Chrome ist es in Ordnung, funktioniert aber nicht in Firefox.

Hat jemand eine Lösung?

Wenn Ihre Position-x 0 ist, gibt es keine andere Lösung als das Schreiben:

background-position: 0 100px;

background-position-x ist eine nicht standardmäßige Implementierung, die vom IE stammt. Chrome hat es kopiert, aber leider nicht Firefox ...

Diese Lösung ist jedoch möglicherweise nicht perfekt, wenn Sie separate Sprites auf einem großen Hintergrund haben, wobei Zeilen und Spalten unterschiedliche Bedeutungen haben ... (z. B. unterschiedliche Logos in jeder Zeile, rechts ausgewählt / schwebend, links einfach) In diesem Fall Ich würde vorschlagen, das Gesamtbild in separate Bilder zu trennen oder die verschiedenen Kombinationen in das CSS zu schreiben ... Abhängig von der Anzahl der Sprites könnte das eine oder andere die beste Wahl sein.

Benutze das

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

An Stelle von

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

Firefox 49 wird - mit Unterstützung für background-position-[xy]- im September 2016 veröffentlicht. Bei älteren Versionen bis 31 können Sie CSS-Variablen verwenden , um den Hintergrund auf einer einzelnen Achse zu positionieren, ähnlich wie bei background-position-xoder background-position-y. CSS-Variablen haben im Dezember 2015 den Status der Kandidatenempfehlung erreicht .

Das folgende Beispiel ist ein vollständig browserübergreifendes Beispiel für das Ändern der Hintergrundpositionsachsen für Sprite-Bilder beim Hover:

: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;ist funktioniert nicht in Firefox Web - Browser.

Sie sollten diese Art von Syntax befolgen:

background-position: 10px 15px;

10px ist an "Position-x" und 15px an "Position-y" gebunden.

100% funktionierende Lösung

Folgen Sie dieser URL für weitere Beispiele

Warum benutzt du die Hintergrundposition nicht direkt?

Verwenden:

background-position : 40% 56%;

Anstatt:

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

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

Funktioniert nicht, wenn Sie einen Hintergrund zusammen mit dem Bild wünschen. Verwenden Sie also:

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

Das hat bei mir funktioniert:

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

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

Stellen Sie sicher, dass Sie die Messung Ihres Offsets explizit angeben. Ich bin heute genau auf dieses Problem gestoßen, und es lag daran, wie Browser die Werte interpretieren, die Sie in Ihrem CSS angeben.

Dies funktioniert beispielsweise in Chrome einwandfrei:

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

Für Firefox und IE müssen Sie jedoch Folgendes schreiben:

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

Hoffe das hilft.

Diese Lösung ist jedoch möglicherweise nicht perfekt, wenn Sie separate Sprites auf einem großen Hintergrund haben, wobei Zeilen und Spalten unterschiedliche Bedeutungen haben ... (z. B. unterschiedliche Logos in jeder Zeile, rechts ausgewählt / schwebend, links einfach) In diesem Fall Ich würde vorschlagen, das Gesamtbild in separate Bilder zu trennen oder die verschiedenen Kombinationen in das CSS zu schreiben ... Abhängig von der Anzahl der Sprites könnte das eine oder andere die beste Wahl sein.

Meins hat das genaue Problem, wie von Orabîg angegeben, das eine Tabelle wie Sprite hat, die Spalten und Zeilen enthält.

Unten ist, was ich als Workaround mit js verwendet habe

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