84

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

誰にも解決策はありますか？

4

9 に答える 9

120

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

background-position: 0 100px;

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

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

于 2013-02-13T00:29:03.440 に答える
16

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

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

: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;  }
于 2015-03-26T15:31:10.270 に答える
3

background-positionを直接使用しないのはなぜですか?

使用する：

background-position : 40% 56%;

それ以外の：

background-position-x : 40%;
background-position-y : 56%
于 2016-06-08T15:01:59.680 に答える
3 
background: url("path") 89px 78px no-repeat;

画像と一緒に背景が必要な場合は機能しません。だから使用：

background: orange url("path-to-image.png") 89px 78px no-repeat;
于 2014-12-15T10:42:19.750 に答える
1

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

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

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}
于 2015-03-24T09:39:41.940 に答える
0

オフセットの測定値を明示的に記載していることを確認してください。今日、まさにこの問題に遭遇しました。これは、CSS で提供された値をブラウザーが解釈する方法が原因でした。

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

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

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

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

お役に立てれば。

于 2014-06-26T15:38:58.890 に答える
0

ただし、大きな背景に個別のスプライトがあり、行と列が異なる意味を持つ場合、このソリューションは完璧ではない可能性があります... (たとえば、各行の異なるロゴ、右側に選択/ホバー、左側に無地) その場合、全体像を別々の画像に分割するか、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');   
    }
  });      
}
于 2014-04-16T17:03:54.500 に答える