私のコードでは、background-position-yは機能しません。Chromeでは問題ありませんが、Firefoxでは機能しません。

誰かが解決策を持っていますか？

position-xが0の場合、次のように書く以外に解決策はありません。

background-position: 0 100px;

background-position-xは、IEからの非標準の実装です。Chromeはそれをコピーしましたが、残念ながらFirefoxではありません...

ただし、大きな背景に別々のスプライトがあり、行と列が異なる意味を持つ場合、このソリューションは完全ではない可能性があります...（たとえば、各行に異なるロゴ、右側に選択/ホバー、左側にプレーン）その場合、全体像を別々の画像に分けるか、CSSでさまざまな組み合わせを書くことをお勧めします...スプライトの数に応じて、どちらかが最良の選択である可能性があります。

これを使って

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

これの代わりに

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

Firefox 49は、background-position-[xy] 2016年9月にリリースされます（サポート付き）。31までの古いバージョンでは、CSS変数を使用して、background-position-xまたはを使用するのと同様に、単一の軸に背景を配置できますbackground-position-y。CSS変数は、2015年12月に候補推奨ステータスに達しました。

以下は、ホバー時にスプライト画像の背景位置軸を変更する完全なクロスブラウザーの例です。

: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;されて動作していないFirefox Webブラウザで。

このタイプの構文に従う必要があります。

background-position: 10px 15px;

10pxは「position-x」にバインドされ、15pxは「position-y」にバインドされます

100％機能するソリューション

その他の例については、このURLに従ってください

背景位置を直接使ってみませんか？

使用する：

background-position : 40% 56%;

の代わりに：

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

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

画像と一緒に背景が必要な場合は機能しません。したがって、以下を使用します。

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

これは私のために働いた：

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

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

オフセットの測定値を明示的に記載するようにしてください。私は今日この正確な問題に遭遇しました、そしてそれはブラウザがあなたのCSSで提供する値をどのように解釈するかによるものでした。

たとえば、これはChromeで完全に機能します。

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

ただし、FirefoxとIEの場合は、次のように書く必要があります。

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

お役に立てれば。

ただし、大きな背景に別々のスプライトがあり、行と列が異なる意味を持つ場合、このソリューションは完全ではない可能性があります...（たとえば、各行に異なるロゴ、右側に選択/ホバー、左側にプレーン）その場合、全体像を別々の画像に分けるか、CSSでさまざまな組み合わせを書くことをお勧めします...スプライトの数に応じて、どちらかが最良の選択である可能性があります。

鉱山には、列と行を持つスプライトのようなテーブルがあるOrabîgが述べたように、正確な問題があります。

以下は、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');   
    }
  });      
}