W moim kodzie background-position-ynie działa. W przeglądarce Chrome jest ok, ale nie działa w przeglądarce Firefox.

Czy ktoś ma jakieś rozwiązanie?

Jeśli twoja pozycja-x wynosi 0, nie ma innego rozwiązania niż napisanie:

background-position: 0 100px;

background-position-x to niestandardowa implementacja pochodząca z IE. Chrome go skopiował, ale niestety nie Firefox ...

Jednak to rozwiązanie może nie być idealne, jeśli masz oddzielne sprite'y na dużym tle, z rzędami i kolumnami oznaczającymi różne rzeczy ... (na przykład różne logo w każdym rzędzie, zaznaczone / najechane kursorem po prawej stronie, proste po lewej). Proponuję podzielić duży obraz na osobne obrazy lub zapisać różne kombinacje w CSS ... W zależności od liczby sprite'ów, jeden lub drugi może być najlepszym wyborem.

Użyj tego

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

Zamiast tego

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

Firefox 49 zostanie wydany - z obsługą background-position-[xy]- we wrześniu 2016 r. W przypadku starszych wersji, do 31, możesz użyć zmiennych CSS, aby ustawić tło na jednej osi, podobnie jak przy użyciu background-position-xlub background-position-y. Zmienne CSS osiągnęły status rekomendacji kandydata w grudniu 2015 r .

Poniżej znajduje się przykład modyfikowania osi pozycji tła w obrazach sprite po najechaniu kursorem w pełni działającym w różnych przeglądarkach:

: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;to nie działa w przeglądarce internetowej Firefox.

Powinieneś przestrzegać tego typu składni:

background-position: 10px 15px;

10 pikseli jest ograniczone do „pozycja-x”, a 15 pikseli z „pozycja-y”

W 100% działające rozwiązanie

Więcej przykładów znajdziesz pod tym adresem URL

Dlaczego nie używasz bezpośrednio pozycji tła ?

Posługiwać się:

background-position : 40% 56%;

Zamiast:

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

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

Nie zadziała, jeśli chcesz mieć tło wraz z obrazem. Więc użyj:

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

To zadziałało dla mnie:

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

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

Upewnij się, że wyraźnie określasz miarę swojego przesunięcia. Właśnie dzisiaj natknąłem się na ten problem, a wynikało to z tego, jak przeglądarki interpretują wartości podane w CSS.

Na przykład działa to doskonale w Chrome:

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

Ale w przypadku Firefoksa i IE musisz napisać:

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

Mam nadzieję że to pomoże.

Jednak to rozwiązanie może nie być idealne, jeśli masz oddzielne sprite'y na dużym tle, z rzędami i kolumnami oznaczającymi różne rzeczy ... (na przykład różne logo w każdym rzędzie, zaznaczone / najechane kursorem po prawej stronie, proste po lewej). Proponuję podzielić duży obraz na osobne obrazy lub zapisać różne kombinacje w CSS ... W zależności od liczby sprite'ów, jeden lub drugi może być najlepszym wyborem.

Mój ma dokładnie ten sam problem, co Orabîg, który ma tabelę przypominającą duszkę, która ma kolumny i wiersze.

Poniżej znajduje się sposób obejścia problemu przy użyciu 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');   
    }
  });      
}