css背景位置不工作

我有3个a标签伪装成“翻滚按钮”

现在，当我尝试为每个特定元素指定初始背景位置时，如下所示：

#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

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

我现在有点不舒服，所以这可能是一个疏忽，但我已经坚持了一个小时了，无法理解

有什么想法吗

谢谢

---

编辑pastebin love

我不是在重复你的问题。哪个浏览器

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

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

---

通过设置背景（作为背景位置的容器），某些浏览器可能会遇到特殊性问题。

您考虑过将其放入

吗？

这样容易多了。 比如：

---

看看这是否有效；）

如果拆分背景属性，将起作用

---

我认为问题源于在

.button

类上声明了一个不完整的速记属性

可以在jsFiddle上看到一个固定的示例：

拆分“background”速记属性

如果省略了速记属性中的一个条目，则省略的条目将重置为默认条目，而不是单独保留

因此，所发生的事情大致相当于：

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

---

编辑：在代码中，

背景位置

值位于

背景

值之后。。。但是我很确定按钮选择器比保留我们公司和类似的选择器更具体，这意味着它的规则优先于其他选择，即使其他选择在后面。

我知道很久以前就有人问过这个问题，但我想我已经解决了

我有完全相同的问题，定位是在Chrome等，但不是Firefox工作

花了这么长时间才想出这个愚蠢的答案

background-position     :   7 4;

将在chrome中工作，但不能在Firefox中工作

background-position     :   7px 4px;

---

两者都适用。

我已经有一段时间没有使用精灵了……但是这些值不是应该是正的，也不是负的吗？@jcoc611因为我是自下而上的，所以我使用的是negativesRight……但我仍然认为值得尝试……还有……一个网站或JSFIDLE的链接会很棒。同上，找不到问题。我想试试。谢谢你的回复。试过了，但没有乐趣。让我抓狂的是，我没有收到web开发插件（firefox）报告的任何CSS错误是的，你必须发布一个示例。我想如果你回答了，你会在2分钟内得到答案。这正是我之前谈论的特殊性问题。将#按钮中的“背景”更改为“背景图像：url（blah）；背景重复：不重复“而且很有效。是的，他在原始代码中没有提到他有“#按钮。按钮”。完全改变了它的面貌。：）啊，好的，IE7支持：悬停，它挣扎：虽然是活动的。为了澄清，是缺乏“px”破坏了它

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

#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     :   7 4;

background-position     :   7px 4px;