CSS背景位置不起作用

Question

我有 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

请注意，悬停位置按预期工作。

我现在有点不舒服，所以这可能是一个疏忽，但我已经在这个问题上徘徊了一个小时，无法弄清楚。

有什么想法吗？

谢谢

编辑 pastebin爱http://pastebin.com/SeZkjmHa

Answer 1

我不会重现您的问题。哪个浏览器？

最初的想法（没有看到错误案例）是将您的初始背景定义从完整的“背景：”更改为背景图像声明：

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

通过设置背景（背景位置的容器），某些浏览器可能会在此处遇到特异性问题。

Answer 2

拆分“背景”速记属性。

如果您省略了速记属性中的一项，则省略的项将重置为默认值，而不是简单地保留。

所以发生的事情或多或少相当于：

#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 和类似选择器更具体，这意味着它的规则优先于其他规则，即使其他规则紧随其后。

Answer 3

我知道这是很久以前问过的，但我想我已经解决了。

我遇到了完全相同的问题，定位在 Chrome 等中有效，但在 Firefox 中无效。

花了这么长时间才弄明白这个愚蠢的答案，

background-position     :   7 4;

适用于 chrome，但不适用于 Firefox..

background-position     :   7px 4px;

两者都适用。

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

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

看看这是否有效；）

Answer 6

我认为问题源于在 .button 类上声明了一个不完整的速记属性。

一个固定的例子可以在 jsFiddle 看到：http://jsfiddle.net/rRVBL/