16

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

4

6 回答 6

39

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

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

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

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

于 2011-05-18T00:42:52.767 回答
10

拆分“背景”速记属性。

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

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

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

于 2011-05-18T01:36:17.027 回答
5

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

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

花了这么长时间才弄清楚愚蠢的答案，

background-position     :   7 4;

可以在 chrome 中工作，但不能在 Firefox 中工作。

background-position     :   7px 4px;

将在两者中工作。

于 2013-04-11T05:25:20.243 回答
1

如果您拆分背景属性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;
}
于 2011-05-18T01:06:09.250 回答
0

您是否考虑过将其纳入<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;
 }

看看这是否有效；）

于 2011-05-18T00:58:35.400 回答
0

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

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

于 2011-05-18T01:14:58.377 回答