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-xbackground-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'); } }); }