CSS css背景位置不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6038680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background-position not working
提问by qwerty
I have 3 a tags disguised as "roll over buttons".
我有 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>
Each button is getting its initial image from the CSS as follows:
每个按钮都从 CSS 获取其初始图像，如下所示：
.button{
background:url(theimage.jpg);
width;height; etc...
}
Now, when i try to assign initial background position for each specific element as such:
现在，当我尝试为每个特定元素分配初始背景位置时：
#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;
}
The Issue:each button defaults to position 0 0
问题：每个按钮的默认位置为 0 0
Note that the hover positions work as expected.
请注意，悬停位置按预期工作。
I'm kind of sick right now so this is probably an oversight but I've been stairing at this for an hour now and can't figure it out.
我现在有点不舒服，所以这可能是一个疏忽，但我已经在这个问题上爬了一个小时，无法弄清楚。
Any thoughts?
有什么想法吗？
Thanks
谢谢
EDITpastebin love http://pastebin.com/SeZkjmHa
编辑pastebin 爱http://pastebin.com/SeZkjmHa
回答by John Green
I'm not reproducing your issue. Which browser?
我不是在重现你的问题。哪个浏览器？
Initial thought (without seeing an error case) is to change your initial background definition from a full 'background:' to a background-image declaration:
最初的想法（没有看到错误案例）是将您的初始背景定义从完整的“背景：”更改为背景图像声明：
.button{
background-image:url(theimage.jpg);
width;height; etc...
}
By setting background, which is a container for background-position, some browsers may have issues with specificity issues there.
通过设置 background，它是 background-position 的容器，一些浏览器可能会在那里遇到特殊性问题。
回答by DavidJCobb
Split up the "background" shorthand property.
拆分“背景”速记属性。
If you omit one of the entries in a shorthand property, the omitted entry is reset to the default rather than simply being left alone.
如果省略速记属性中的条目之一，则省略的条目将重置为默认值，而不是简单地保持不变。
So what's happening is more-or-less the equivalent of this:
所以发生的事情或多或少相当于：
#someElement {
background-position:0 -100px;
background:url(image.png) no-repeat;
/* ^--- omitted background-position gets reset to the default */
}
Break the shorthand into different entries:
将速记分解为不同的条目：
#someElement {
background-image:url(image.png);
background-repeat:no-repeat;
}
EDIT: In your code, the background-positionvalues come after the backgroundvalues... But I'm pretty sure that the #buttons .buttonselector is more specific than the #retain-our-firmand similar selectors, meaning that its rule takes precedence over the others even though the others come after.
编辑：在你的代码中，background-position值在值之后background......但我很确定#buttons .button选择器比#retain-our-firm和类似的选择器更具体，这意味着它的规则优先于其他选择器，即使其他选择器紧随其后。
回答by Corey
I know this was asked ages ago, but I think I have the fix.
我知道这是很久以前问过的问题，但我想我已经解决了。
I had the exact same problem, the positioning was working in Chrome etc but not Firefox.
我遇到了完全相同的问题，定位在 Chrome 等中有效，但在 Firefox 中无效。
Took so long to figure out the silly answer,
花了这么长时间才找出愚蠢的答案，
background-position : 7 4;
Will work in chrome, but not Firefox..
可以在 chrome 中工作，但不能在 Firefox 中工作。
background-position : 7px 4px;
Will work in both.
将在两者中工作。
回答by Amit G
Works if you split up the background properties, http://jsfiddle.net/kTYyU/.
如果您拆分背景属性，则可以使用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;
}
回答by rjb
I think the problem stems from declaring an incomplete shorthand property on your .buttonclass.
我认为问题源于在您的.button班级上声明了一个不完整的速记属性。
A fixed example can be seen at jsFiddle: http://jsfiddle.net/rRVBL/
在 jsFiddle 可以看到一个固定的例子：http: //jsfiddle.net/rRVBL/
回答by woninana
Have you considered getting it into <ul> <li> </li> <ul>?It is much easier this way.
like:
你有没有考虑过把它放进去，<ul> <li> </li> <ul>?这样更容易。喜欢：
<ul class="buttons">
<li href=''></a>
<li href=''></a>
<li href=''></a>
</ul>
for the css part
对于 css 部分
.buttons li{
background:url(theimage.jpg);
width;height; etc...
}
.buttons li:hover{
background-position:0 0;
}
see if that works ;)
看看这是否有效；）
