Html background-position-y 在 Firefox 中不起作用（通过 CSS）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14844407/
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
background-position-y doesn't work in Firefox (via CSS)?
提问by Marlos Carmo
In my code the background-position-ydoesn't work. In Chrome it's ok, but not working in Firefox.
在我的代码background-position-y中不起作用。在 Chrome 中没问题，但在 Firefox 中不起作用。
Anyone have any solution?
有人有任何解决方案吗？
回答by Orab?g
If your position-x is 0, there's no other solution than writing :
如果您的 position-x 为 0，则除了写入之外别无他法：
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
background-position-x 是来自 IE 的非标准实现。Chrome 确实复制了它，但遗憾的是不是 firefox ......
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
然而，如果你在大背景上有单独的精灵，这个解决方案可能并不完美，行和列意味着不同的东西......（例如，每行上的不同标志，选择/悬停在右侧，左侧是普通的）在这种情况下，我建议在单独的图像中分离大图，或者在 CSS 中编写不同的组合......根据精灵的数量，一个或另一个可能是最佳选择。
回答by farshad saeidi
Use this
用这个
background: url("path-to-url.png") 89px 78px no-repeat;
Instead of this
而不是这个
background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;
回答by Andy E
Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variablesto achieve positioning the background on a single axis similar to using background-position-xor background-position-y. CSS variables reached Candidate Recommendation status in December 2015.
Firefox 49将在 2016 年background-position-[xy]9 月发布（支持）。对于 31 以下的旧版本，您可以使用CSS 变量来实现在单个轴上定位背景，类似于使用background-position-x或background-position-y。CSS 变量在 2015 年 12 月达到候选推荐状态。
The following is a fully cross-browser example of modifying background position axes for sprite images on hover:
以下是在悬停时修改精灵图像的背景位置轴的完全跨浏览器示例：
:root {
--bgX: 0px;
--bgY: 0px;
}
a {
background-position: 0px 0px;
background-position: var(--bgX) var(--bgY);
}
a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px; }
a.gplus { background-position-y: -40px; --bgY: -40px; }
回答by Eashan
background-position-y :10px;is not workingin Firefox web browser.
background-position-y :10px;是不是工作在Firefox网页浏览器。
You should follow this type of syntax:
您应该遵循这种类型的语法：
background-position: 10px 15px;
10px is bounded to "position-x" and 15px bounded to "position-y"
10px 与“position-x”有界，15px 与“position-y”有界
100% working Solution
100% 工作解决方案
Follow this URLfor more examples
按照此URL获取更多示例
回答by Sandeep Gantait
Why don't you use background-positiondirectly?
为什么不直接使用background-position呢？
Use:
用：
background-position : 40% 56%;
Instead Of:
代替：
background-position-x : 40%;
background-position-y : 56%
回答by Piotr ?ródka
background: url("path") 89px 78px no-repeat;
Will not work if you want a background along with the image. So use:
如果您想要背景和图像，将不起作用。所以使用：
background: orange url("path-to-image.png") 89px 78px no-repeat;
回答by Stefan
This worked for me:
这对我有用：
a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}
a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}
回答by ace.spades
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
然而，如果你在大背景上有单独的精灵，这个解决方案可能并不完美，行和列意味着不同的东西......（例如，每行上的不同标志，选择/悬停在右侧，左侧是普通的）在这种情况下，我建议在单独的图像中分离大图，或者在 CSS 中编写不同的组合......根据精灵的数量，一个或另一个可能是最佳选择。
Mine has the exact problem as stated by Orab?g which has a table like sprite which has columns and rows.
我的问题与 Orab?g 所说的完全一样，它有一个像 sprite 这样的表，其中有列和行。
Below is what I used as a workaround using js
以下是我使用 js 用作解决方法的内容
firefoxFixBackgroundposition:function(){
$('.circle').on({
mouseenter: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');
},
mouseleave: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');
}
});
}
回答by Mike Zavarello
Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.
确保您明确说明您的偏移量。我今天遇到了这个确切的问题，这是由于浏览器如何解释您在 CSS 中提供的值。
For example, this works perfectly in Chrome:
例如，这在 Chrome 中完美运行：
background: url("my-image.png") 100 100 no-repeat;
But, for Firefox and IE, you need to write:
但是，对于 Firefox 和 IE，您需要编写：
background: url("my-image.png") 100px 100px no-repeat;
Hope this helps.
希望这可以帮助。
