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

Question

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

有人有任何解决方案？

Answer 1

如果你的position-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 将于background-position-[xy] 2016年9月发布 - 支持-in.对于最多31个旧版本,您可以使用CSS变量来实现将背景定位在单个轴上,类似于使用background-position-x或background-position-y.CSS变量于2015年12月达到候选推荐状态.

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

: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

background-position-y :10px;是不是工作在Firefox网页浏览器.

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

background-position: 10px 15px;

10px受限于"position-x",15px受限于"position-y"

100%工作解决方案

请访问此URL以获取更多示例