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)?的主要内容,如果未能解决你的问题,请参考以下文章
使用 Jquery 在 Firefox 中为背景位置 y 设置动画
微信小程序开发手记之三:backgroud和border属性