CSS background-позиция не работает

у меня есть 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

12
background-position css

6 ответов

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

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

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

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

31

разделите свойство стенографии" background".

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

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

#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 и аналогичные селекторы, что означает, что его правило имеет приоритет над другими, даже если другие приходят после.

8

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

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

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

background-position     :   7 4;

будет работать в chrome, но не Firefox..

background-position     :   7px 4px;

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

2

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

вы рассматривали возможность получить его в <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

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

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

0