在我的代码background-position-y中不起作用。在Chrome中可以，但是在Firefox中不起作用。

有人有什么解决办法吗？

如果您的position-x为0，那么除了编写其他解决方案：

background-position: 0 100px;

background-position-x是来自IE的非标准实现。Chrome确实复制了它，但遗憾的是没有将其复活。

但是，如果您在大背景上有单独的子画面，并且行和列表示不同的内容，则此解决方案可能不是完美的……（例如，每行上有不同的徽标，选中/悬停在右侧，平原在左侧），在这种情况下，我建议将大图片分离为单独的图像，或在CSS中编写不同的组合...根据sprite的数量，一个或另一个可能是最佳选择。

用这个

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;

Firefox 49将在2016年background-position-[xy]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;  }

background-position-y :10px;是不是工作在Firefox网页浏览器。

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

background-position: 10px 15px;

10px绑定到“ position-x”，而15px绑定到“ position-y”

100％工作解决方案

请遵循此URL以获取更多示例

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

使用：

background-position : 40% 56%;

代替：

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

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

确保您明确声明偏移量的度量。我今天遇到了这个确切的问题，这是由于浏览器如何解释您在CSS中提供的值。

例如，这在Chrome中非常有效：

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

但是，对于Firefox和IE，您需要编写：

background: url("my-image.png") 100px 100px 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');   
    }
  });      
}