background-position-y 在 Firefox 中不起作用（通过 CSS）？

Posted 2023-03-05

【中文标题】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%