web-dev-qa-db-ja.com

cssbackground-positionが機能していません

「ロールオーバーボタン」を装ったタグが3つあります。

<div id="buttons">
    <a class='button' id='but1' href=''></a>
    <a class='button' id='but2' href=''></a>
    <a class='button' id='but3' href=''></a>
</div>

各ボタンは、次のようにCSSから初期画像を取得しています。

.button{
    background:url(theimage.jpg);
    width;height; etc...
}

ここで、特定の要素ごとに初期の背景位置を割り当てようとすると、次のようになります。

#but1{
    background-position:0 0;
}
#but1:hover{
    background-position:0 -50px;
}

#but2{
    background-position:0 -100px;
}
#but2:hover{
    background-position:0 -150px;
}

#but3{
    background-position:0 -200px;
}
#but3:hover{
    background-position:0 -250px;
}

問題：各ボタンはデフォルトで00の位置になります

ホバー位置は期待どおりに機能することに注意してください。

私は今ちょっと病気なので、これはおそらく見落としですが、私はこれで1時間階段を上っていて、それを理解することができません。

何かご意見は？

ありがとう

[〜＃〜]編集[〜＃〜]Pastebin love http://Pastebin.com/SeZkjmHa

cssbackground-position
14
qwerty

私はあなたの問題を再現していません。どのブラウザ？

最初の考えは（エラーケースを見ることなく）、最初の背景定義を完全な「background：」からbackground-image宣言に変更することです。

.button{
  background-image:url(theimage.jpg);
  width;height; etc...
}

Background-positionのコンテナであるbackgroundを設定することにより、一部のブラウザでは特異性の問題が発生する可能性があります。

33
John Green

「背景」の省略形プロパティを分割します。

省略形プロパティのエントリの1つを省略すると、省略されたエントリは単にそのままではなく、デフォルトにリセットされます。

したがって、何が起こっているかは、多かれ少なかれこれと同等です。

#someElement {
    background-position:0 -100px;
    background:url(image.png) no-repeat;
    /* ^--- omitted background-position gets reset to the default */
}

速記をさまざまなエントリに分割します。

#someElement {
    background-image:url(image.png);
    background-repeat:no-repeat;
}

編集：あなたのコードでは、background-position値はbackground値の後にあります...しかし、#buttons .buttonセレクターは#retain-our-firmよりも具体的であると確信していますおよび同様のセレクター。つまり、他のセレクターが後に続く場合でも、そのルールが他のセレクターよりも優先されます。

9
DavidJCobb

私はこれが何年も前に尋ねられたことを知っています、しかし私は私が修正を持っていると思います。

私はまったく同じ問題を抱えていました。配置はChromeなどで機能していましたが、Firefoxでは機能していませんでした。

ばかげた答えを理解するのにとても時間がかかりました、

background-position     :   7 4;

Chromeで動作しますが、Firefoxでは動作しません。

background-position     :   7px 4px;

両方で動作します。

4
Corey

背景のプロパティを分割すると機能します http://jsfiddle.net/kTYyU/ 。

#buttons .button{
    display:block;
    position:relative;
    float:left;
    width:250px;
    height:80px;
    padding-left:20px;
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png);
    background-repeat:no-repeat;
}
1
Amit G

<ul> <li> </li> <ul>?に入れることを検討しましたか。この方法の方がはるかに簡単です。お気に入り：

<ul class="buttons">
    <li  href=''></a>
    <li  href=''></a>
    <li  href=''></a>
</ul>

css部分の場合

.buttons li{
    background:url(theimage.jpg);
    width;height; etc...
}

.buttons li:hover{
    background-position:0 0;
 }

それが機能するかどうかを確認してください;）

0
woninana

この問題は、.buttonクラスで不完全な省略形プロパティを宣言することに起因すると思います。

修正された例はjsFiddleで見ることができます： http://jsfiddle.net/rRVBL/

0
rjb