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
6 ответов
Я не воспроизводят вашу проблему. Какой браузер?
начальная мысль (не видя случая ошибки) состоит в том, чтобы изменить первоначальное определение фона с полного "фона:" на объявление фонового изображения:
.button{
background-image:url(theimage.jpg);
width;height; etc...
}
установив background, который является контейнером для background-position, некоторые браузеры могут иметь проблемы со спецификацией.
разделите свойство стенографии" 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
и аналогичные селекторы, что означает, что его правило имеет приоритет над другими, даже если другие приходят после.
Я знаю, что это было задано давным-давно, но я думаю, что у меня есть исправление.
у меня была точно такая же проблема, позиционирование работает в Chrome и т. д., Но не в Firefox.
потребовалось так много времени, чтобы понять глупый ответ,
background-position : 7 4;
будет работать в chrome, но не Firefox..
background-position : 7px 4px;
будет работать в обоих.
работает, если вы разделите свойства фона,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;
}
вы рассматривали возможность получить его в <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;
}
посмотрите, работает ли это;)
Я думаю, что проблема связана с объявлением неполного свойства стенографии на вашем .button
класса.
фиксированный пример можно увидеть в jsFiddle:http://jsfiddle.net/rRVBL/