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;

将在两者中工作。