css背景位置不起作用

我有3個標籤僞裝成「滾動按鈕」。css背景位置不起作用

每個按鈕從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; 
}

The Issue：每個按鈕的默認位置爲0 0

請注意，懸停位置按預期工作。

我現在有點生病，所以這可能是一個疏忽，但我一直在堅持一個小時，現在無法弄清楚。

有什麼想法？

感謝

編輯引擎收錄愛http://pastebin.com/SeZkjmHa

來源

2011-05-18 qwerty

自從我使用過精靈以來已經有一段時間了......但是不應該將這些值看作正面而不是負面？ – JCOC611 2011-05-18 00:38:28

@ jcoc611由於我從下往上使用負面效果 – qwerty 2011-05-18 00:40:26

正確...但我仍然認爲這值得嘗試......還有一個鏈接到網站或jsfiddle會很棒。 – JCOC611 2011-05-18 00:41:26

我不會重現您的問題。哪個瀏覽器？

最初的想法（沒有顯示錯誤的情況下）是初始背景定義從完全改變的背景：「到背景圖像的聲明：

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

通過設置的背景，這是一種用於容器背景位置，有些瀏覽器可能會遇到特殊問題。

來源

2011-05-18 00:42:52

同上，找不到問題。我會嘗試^。 – 2011-05-18 00:44:43

感謝您的回覆。試過但沒有歡樂。驅動我堅果，因爲我沒有得到任何由Web開發插件報告的CSS錯誤（Firefox） – qwerty 2011-05-18 00:45:46

是的，你必須發表一個例子。我想你會在2分鐘內得到答案。 – 2011-05-18 00:49:56

你有沒有考慮把它變成<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; 
}

其是否正常工作;）

來源

2011-05-18 00:58:35 woninana

我不認爲李：懸停將工作在IE – qwerty 2011-05-18 01:00:27

它適用於我，你使用什麼IE版本？ – woninana 2011-05-18 01:04:45

我預測IE7或更少。 – 2011-05-18 01:06:51

作品，如果你分手了背景屬性，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; 
}

來源

2011-05-18 01:06:09

我認爲這個問題源於你的.button類聲明一個不完整的速記屬性。

的固定例如可以在的jsfiddle可以看出：http://jsfiddle.net/rRVBL/

來源

2011-05-18 01:14:58 rjb

拆分了「背景」的簡寫屬性。

如果您省略了速記屬性中的某個條目，則省略的條目將重置爲默認條目，而不是簡單地單獨保留。

#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和類似的選擇器更具體，這意味着它的規則優先於其他規則，即使其他規則也是如此。

來源

2011-05-18 01:36:17 DavidJCobb

我知道這是多年前提出的，但我認爲我有修復。

我有完全相同的問題，定位在Chrome等工作，但不是Firefox。

了這麼久才找出答案傻，

background-position  : 7 4;

將工作中鉻，但不使用Firefox ..

background-position  : 7px 4px;

將同時工作。

來源

2013-04-11 05:25:20 Corey

爲了澄清，它缺乏打破它的「px」 – Corey 2013-04-11 05:26:03

css背景位置不起作用

回答

相關問題