使用此

Question

在我的代码中，background-position-y不起作用。在Chrome中没关系，但在Firefox中无效。

有人有任何解决方案吗？

Answer 1

如果你的位置-x为0，除了写作之外别无其他解决方案：

background-position: 0 100px;

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

然而，如果你在大背景上有单独的精灵，这个解决方案可能并不完美，行和列意味着不同的东西......（例如每行上的不同徽标，右边选中/悬停，左边是平原）在这种情况下，我建议将单独的图像中的大图分开，或者在CSS中编写不同的组合......根据精灵的数量，一个或另一个可能是最佳选择。

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

Answer 3

Firefox 49 will be released - 支持background-position-[xy] - 2016年9月。对于最多31个旧版本，您可以使用CSS variables将背景定位在单个轴上，类似于使用background-position-x或background-position-y。 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;  }

Answer 4

在Firefox网络浏览器中
background-position-y :10px; 无法正常工作。

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

background-position: 10px 15px;

10px受限于＆＃34;位置-x＆＃34;并且15px限制在＆＃34; position-y＆＃34;

100％正常工作的解决方案

关注此URL以获取更多示例

Answer 5

background: url("path") 89px 78px no-repeat;

如果您想要背景以及图像，则无效。所以使用：

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

Answer 6

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

使用：

background-position : 40% 56%;

代替：

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

Answer 7

这对我有用：

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

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

Answer 8

然而，如果你在大背景上有单独的精灵，这个解决方案可能并不完美，行和列意味着不同的东西......（例如，每行上的不同徽标，右边选择/悬停，左边是平面）在这种情况下，我建议将单独的图像中的大图分开，或者在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');   
    }
  });      
}

Answer 9

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

例如，这在Chrome中完美运行：

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

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

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

希望这有帮助。

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

9 个答案:

使用此

而不是