84

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

任何人有任何解决方案？

4

9 回答 9

120

如果您的 position-x 为 0，则除了编写之外没有其他解决方案：

background-position: 0 100px;

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

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

于 2013-02-13T00:29:03.440 回答
19

用这个

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;
于 2013-10-20T18:54:10.547 回答
16

Firefox 49将于2016年background-position-[xy]9 月发布——支持 CSS 变量在 2015 年 12 月达到候选推荐状态。background-position-xbackground-position-y

以下是在悬停时修改精灵图像的背景位置轴的完全跨浏览器示例：

: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;  }
于 2015-03-26T15:31:10.270 回答
16

background-position-y :10px;无法在 Firefox 网络浏览器中运行。

您应该遵循这种类型的语法：

background-position: 10px 15px;

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

100% 工作解决方案

按照此URL获取更多示例

于 2015-06-15T06:54:13.577 回答
3 
background: url("path") 89px 78px no-repeat;

如果您想要背景与图像一起使用，则无法使用。所以使用：

background: orange url("path-to-image.png") 89px 78px no-repeat;
于 2014-12-15T10:42:19.750 回答
3

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

利用：

background-position : 40% 56%;

代替：

background-position-x : 40%;
background-position-y : 56%
于 2016-06-08T15:01:59.680 回答
1

这对我有用：

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

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}
于 2015-03-24T09:39:41.940 回答
0

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

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

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

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

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

希望这可以帮助。

于 2014-06-26T15:38:58.890 回答
0

但是，如果您在大背景上有单独的精灵，则此解决方案可能并不完美，其中行和列表示不同的事物...（例如，每行上的不同徽标，在右侧选择/悬停在右侧，在左侧纯色）在这种情况下，我建议将大图片分成单独的图像，或者在 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');   
    }
  });      
}
于 2014-04-16T17:03:54.500 回答