CSS背景位置无法工作

Question

我有3个伪装成“滑过按钮”的a标签。

<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

- qwerty

---

我已经有一段时间没有使用精灵了... 但是数值不应该是正的而不是负的吗？ - JCOC611

@jcoc611 因为我是从下往上计算，所以我使用负数。 - qwerty

没错...但我仍然认为值得一试...另外...提供一个网站或jsfiddle的链接会很棒。 - JCOC611

Answer 1

我无法复现你的问题。你用的是哪个浏览器？

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

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

通过设置背景(background)，它是background-position的容器，一些浏览器可能会出现特异性问题。

- John Green

---

同上，找不到问题。我会尝试使用^。 - Amit G

谢谢回复。我尝试过了，但是没有成功。这让我很烦恼，因为Web开发插件（火狐浏览器）没有报告任何CSS错误。 - qwerty

是的，您需要发布一个示例。如果您这样做了，我认为您会在2分钟内得到答案。 - John Green

这正是我之前所说的特定性问题。将 #buttons .button 中的 'background' 更改为 'background-image:url(blah);background-repeat:no repeat'，它就可以工作了。 - John Green

是的，他在原始代码中没有提到他有“＃buttons .button”。这完全改变了它的面貌。：） - John Green

Answer 2

拆分“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;
}

编辑：在你的代码中，background-position值出现在background值之后... 但我几乎可以确定#buttons .button选择器比#retain-our-firm等选择器更具体，这意味着尽管其他选择器出现在其后面，但它的规则仍然优先于其他选择器的规则。

- DavidJCobb

Answer 3

我知道这个问题很久以前就被问过了，但是我认为我找到了解决方法。

我遇到了完全相同的问题，在Chrome等浏览器上定位工作正常，但在Firefox上不行。

花了很长时间才找到这个愚蠢的答案，

background-position: 7 4;

可以在Chrome上运行，但在Firefox上无法运行。

background-position: 7px 4px;

可在两者中使用。

- Corey

---

澄清一下，缺少“px”才导致它出现错误。 - Corey

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

- Amit G

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

看看这是否有效 ;)

- woninana

---

啊，好的，IE7支持:hover，但在:active上则表现不佳，参考http://www.quirksmode.org/css/contents.html#t16。 - Amit G

Answer 6

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

一个修复后的例子可以在jsFiddle上看到：http://jsfiddle.net/rRVBL/

- rjb

Answer 7

如果您来到这里是因为background-position-<axis>无法正常工作，而且您的问题与不完整的background简写属性无关，请再次确认您没有使用contain大小调整属性：

background-size: contain;

在Chrome浏览器上，似乎无法与background-position-<aixis>同时使用。尚未在其他浏览器上进行测试。

- shennan