小开

如果你的位置-x 是0，没有其他解决方案，只能写:

background-position: 0 100px;

后台-position-x 是一个来自 IE 的非标准实现。 Chrome 确实复制了它，但遗憾的是不是 Firefox..。

然而，如果你在一个大的背景上使用单独的精灵，并且行和羽化代表不同的东西，那么这个解决方案可能并不完美(例如，每一行上不同的标志，选择/悬停在右边，平原在左边) 在这种情况下，我建议将大图片分隔成单独的图片，或者在 CSS 中编写不同的组合... ... 取决于精灵的数量，其中一个可能是最好的选择。

小开

用这个

background: url("path-to-url.png") 89px 78px no-repeat;

而不是这样

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

小开

然而，如果你在一个大的背景上使用单独的精灵，并且每一行和每一个协议都有不同的含义，那么这个解决方案可能并不完美。(例如，每一行都有不同的标志，选择/悬停在右边，平面在左边)在这种情况下，我建议把大的图片分离成单独的图片，或者在 CSS 中写出不同的组合。根据精灵的数量，其中一个可能是最好的选择。

我的问题正如 Orabîg 所说的那样，它有一个类似于 sprite 的表，其中包含列和行。

下面是我使用 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');
}
});
}

小开

确保你明确地陈述了你的偏移量的测量。我今天碰到了这个问题，这是由于浏览器如何解释您在 CSS 中提供的值。

例如，这在 Chrome 中运行良好:

background: url("my-image.png") 100 100 no-repeat;

但是，对于 Firefox 和 IE，你需要写:

background: url("my-image.png") 100px 100px no-repeat;

希望这个能帮上忙。

小开

background: url("path") 89px 78px no-repeat;

如果你想要一个背景和图片一起使用，那么使用:

background: orange url("path-to-image.png") 89px 78px no-repeat;

小开

这对我很有效:

a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}


a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}

小开

支持 background-position-[xy]的 Firefox 49 将被释放将于2016年9月推出。对于老版本高达31，您可以使用 CSS 变量来实现定位背景上的单一轴类似使用 background-position-x或 background-position-y。CSS 变量达到候选推荐状态 2015年12月。

下面是一个完全跨浏览器的例子，用于修改悬停状态下的精灵图像的背景位置轴:

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

小开

在 Firefox 浏览器中，background-position-y :10px;是没用。

您应该遵循以下类型的语法:

background-position: 10px 15px;

10px 以“ position-x”为界，15px 以“ position-y”为界

100% 可用的解决方案

按照这个网址更多的例子

小开

你为什么不直接使用 背景-位置呢？

用途:

background-position : 40% 56%;

而不是:

background-position-x : 40%;
background-position-y : 56%

怎么背景-位置-y 不能在 Firefox 中工作(通过 CSS) ？

用这个

而不是这样