background-position-y在Firefox中不工作（通过CSS）？
在我的代码中， background-position-y不起作用。 在Chrome中是可以的，但不能在Firefox中工作。
任何人有任何解决scheme
如果你的位置x是0，除了写作之外没有别的办法：
background-position: 0 100px;
background-position-x是来自IE的非标准实现。 铬确实复制它，但可悲的是不是Firefox …
然而，如果你在一个大的背景下有不同的精灵，这个解决scheme可能并不完美，行和列意味着不同的东西……（例如，每一行上的不同标识，select/hover在右侧，在左侧简单）在这种情况下，我build议将单独的图片中的大图分开，或者在CSS中写入不同的组合…根据精灵的数量，其中一个或另一个可能是最好的select。
用这个
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;
background-position-y :10px;在Firefox浏览器中不起作用 。
你应该遵循这种types的语法：
background-position: 10px 15px;
100％的工作解决scheme
Firefox 49 将在 2016年9月发布，支持background-position-[xy] – 对于旧版本，最多可以使用CSSvariables来实现在单个轴上定位背景，类似于使用background-position-x或background-position-y 。 CSSvariables在2015年12月达到候选推荐状态。
以下是一个完全跨浏览器的示例，用于修改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; }
你为什么不直接使用background-position ？
使用：
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;
希望这可以帮助。
然而，如果你在一个大的背景下有不同的精灵，这个解决scheme可能并不完美，行和列意味着不同的东西……（例如，每一行上的不同标识，select/hover在右侧，在左侧简单）在这种情况下，我build议将单独的图片中的大图分开，或者在CSS中写入不同的组合…根据精灵的数量，其中一个或另一个可能是最好的select。
我有一个确切的问题，如Orabîg所述，它有一个像精灵一样的表，它有列和行。
以下是我用作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'); } }); }
