background-position-y 在 Firefox 中不起作用(通过 CSS)?

Posted

技术标签:

【中文标题】background-position-y 在 Firefox 中不起作用(通过 CSS)?【英文标题】:background-position-y doesn't work in Firefox (via CSS)? 【发布时间】:2013-01-28 11:01:24 【问题描述】:

在我的代码中,background-position-y 不起作用。在 Chrome 中没问题,但在 Firefox 中不起作用。

有人有解决办法吗?

【问题讨论】:

大家好消息!看起来 Firefox 49 将支持 background-position-x-y:developer.mozilla.org/en-US/docs/Web/CSS/… 【参考方案1】:

如果你的 position-x 为 0,那么除了写之外没有其他解决方案:

background-position: 0 100px;

background-position-x 是来自 IE 的非标准实现。 Chrome 确实复制了它,但遗憾的是没有 Firefox...

但是,如果您在大背景上有单独的精灵,行和列表示不同的东西,则此解决方案可能并不完美...(例如,每行上的不同徽标,选择/悬停在右侧,左侧平原) 在这种情况下,我建议将大图片分成单独的图像,或者在 CSS 中编写不同的组合......根据精灵的数量,一个或另一个可能是最佳选择。

【讨论】:

谢谢,很好。我只是去删除了我对 -x 和 -y 的使用,以便我符合标准。 :) 和 FF 一样...奇怪【参考方案2】:

使用这个

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 不支持“Instead”标记,但是是的,它可以工作.. ty ;)【参考方案3】:

但是,如果您在大背景上有单独的精灵,并且行和列表示不同的事物,则此解决方案可能并不完美...(例如,每行上的不同徽标,选择/悬停在右侧,左侧平原)在这种情况下,我建议将大图片分成单独的图像,或者在 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');   
    
  );      

【讨论】:

【参考方案4】:

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

例如,这在 Chrome 中完美运行:

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

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

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

希望这会有所帮助。

【讨论】:

【参考方案5】:
background: url("path") 89px 78px no-repeat;

如果您想要图像的背景,则无法使用。所以使用:

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

【讨论】:

【参考方案6】:

这对我有用:

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


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

【讨论】:

【参考方案7】:

Firefox 49 will be released — 支持 background-position-[xy] — 2016 年 9 月。对于 31 以下的旧版本,您可以使用 CSS variables 实现在单轴上定位背景,类似于使用 background-position-x 或 @ 987654329@。 CSS 变量达到候选推荐状态in December 2015。

以下是一个完全跨浏览器的示例,用于修改悬停时精灵图像的背景位置轴:

: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 仍然是唯一的实现。不是一个好兆头。 @BoltClock:它是 Microsoft 的 under consideration,后面有相当多的选票,以及 Chrome 的开发 just (re)started。然而,对于这个特殊的用例,现在可以使用 CSS 变量,因为唯一实现它们的浏览器是唯一需要它们来模拟 background-position-x/y 的浏览器。 酷!我猜迟到总比没有好:) 刚刚注意到 - CSS Variables is on its way to CR。也很酷。 你好 2016!仍然没有实现...:\【参考方案8】:

background-position-y :10px; 在 Firefox 网络浏览器中不起作用

您应该遵循这种语法:

background-position: 10px 15px;

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

100% 工作解决方案

关注URL 了解更多示例

【讨论】:

这适用于 ff v. 38。应标记为正确的解决方案。它准确地实现了问题所在【参考方案9】:

为什么不直接使用background-position

用途:

background-position : 40% 56%;

代替:

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

【讨论】:

以上是关于background-position-y 在 Firefox 中不起作用(通过 CSS)?的主要内容,如果未能解决你的问题,请参考以下文章

Y 轴上的 JQuery 动画背景图像

简单动画-让你的背景图动起来!!!

使用 Jquery 在 Firefox 中为背景位置 y 设置动画

微信小程序开发手记之三:backgroud和border属性

如何让火狐浏览器兼容background-position的animate动画?

DIV+CSS中复选框的背景颜色不显示,但是边框显示,为啥?