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 love 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选择器比{{1}更具体和类似的选择器，意味着它的规则优先于其他规则，即使其他规则来自。

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/

css背景位置不起作用

6 个答案: