Css background-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;
}

Проблема: каждая кнопка по умолчанию имеет значение 0 0

Обратите внимание, что позиции наведения работают как ожидалось.

Я сейчас как-то болен, так что это, вероятно, недосмотр, но сейчас я занимаюсь этим в течение часа и не могу понять.

Любые мысли?

Спасибо

РЕДАКТИРОВАТЬ пастебиновая любовь http://pastebin.com/SeZkjmHa

Ответ 1

Я не воспроизвожу вашу проблему. Какой браузер?

Первоначальная мысль (не видя случая ошибки) заключается в том, чтобы изменить исходное определение фона из полного "фона:" в объявление фонового изображения:

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

Установив фон, который является контейнером для фонового положения, некоторые браузеры могут иметь проблемы со специфическими проблемами.

Ответ 2

Разделите сокращенное свойство "background".

Если вы опустите одну из записей в сокращенном свойстве, пропущенная запись будет reset по умолчанию, а не просто оставлена одна.

Итак, что происходит больше или меньше, эквивалент этого:

#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;
}

EDIT: в вашем коде значения background-position появляются после значений background... Но я уверен, что селектор #buttons .button более специфичен, чем #retain-our-firm и аналогичные селекторы, что означает, что его правило имеет приоритет над другими, хотя другие приходят после.

Ответ 3

Я знаю, что это задавали много лет назад, но я думаю, что у меня есть исправление.

У меня была такая же проблема, позиционирование работало в Chrome и т.д., но не в Firefox.

Занимался так долго, чтобы понять глупый ответ,

background-position     :   7 4;

Будет работать в хром, но не в Firefox..

background-position     :   7px 4px;

Будет работать в обоих.

Ответ 4

Работает, если вы разделили свойства фона, 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;
}

Ответ 5

Рассматривали ли вы его в <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;
 }

посмотреть, работает ли это;)

Ответ 6

Я думаю, проблема связана с объявлением неполного стенографического свойства в вашем классе .button.

Фиксированный пример можно увидеть в jsFiddle: http://jsfiddle.net/rRVBL/