backgroundPositionX 在 Firefox 上不起作用

Posted

技术标签:

【中文标题】backgroundPositionX 在 Firefox 上不起作用【英文标题】:backgroundPositionX not working on Firefox 【发布时间】:2012-12-06 13:59:15 【问题描述】:

我玩过 youtube 的精灵动画,但有一个问题。 backgroundPositionX 不能在 Firefox 下工作(但可以在 Chrome 和 IE8 上工作)... 这是代码:https://jsfiddle.net/74RZb/

额外信息:问题是在firefox下它不会改变背景位置(不会播放动画)......没有错误,只是没有改变背景位置。

【问题讨论】:

【参考方案1】:

这样使用:

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie

【讨论】:

在回答问题时,请提供解释,以便网站的其他用户更容易理解。【参考方案2】:

这适用于 IE、FF 和 chrome:

背景位置:0 中心;

【讨论】:

【参考方案3】:

你可以这样做

先安装jquery迁移

https://github.com/jquery/jquery-migrate/#readme

在你的 html 中包含这些

$.browser 属性允许您定位要应用您的样式的浏览器

在这种情况下,背景位置可以更改为支持的属性 backgroundPosition

可用的标志是 - webkit - safari - 歌剧 - msie (for IE) - mozilla

IE 或 Firefox 示例

if ( $.browser.msie || $.browser.mozilla) 
        $(".element").css('backgroundPosition', position + "px 0");                

对于铬

if ( $.browser.webkit) 
        $(".element").css('backgroundPosition', position + "px 0");                

我的工作和所有的 IE

干杯

【讨论】:

【参考方案4】:

这对我有用。 NX 是 X 轴上的像素数,NY 是 Y 轴上的像素数。

background-position: calc(NXpx) NYpx;

【讨论】:

【参考方案5】:

Background position-x 可以在 firefox 中工作,你只需要指定一个固定的 background-y 位置。这是我编写的用于从左向右移动功能区的函数。起初,当只有一个 position-x 规范时它不起作用,它在 IE 中有效,但在 FF 中无效。这是我的解决方案。这是我网站上的 cmets 的实际代码,在 IE 和 FF 中都可以使用:

   //starts ribbon motion at bottom of animation div 
    function startMotion() 
        var ribbonMove = setInterval(function ()  ribbonMotion() , 50);
        var x = 0;
        var cycles = 0;

        function ribbonMotion() 
            //background position moves on the x plane and is fixed at 0 on the y plane (single plane specification does not work in FF)
            document.getElementById("ribbon").style.backgroundPosition = x + "px" + " " + 0 + "px";
            x++;
            if (x == 800 || x==1600 || x==2400 ||x==3200) 
                cycles++;

              //sets number of cycles before motion stops (max 4 cycles)  
            
            if (cycles == 3) 
                clearInterval(ribbonMove);
            
        
      

【讨论】:

即使在 CSS 中设置了 background-position-y 也不起作用【参考方案6】:

Firefox 不支持 backgroundPositionX,但支持background position

所以我们可以这样做:

psy.style.backgroundPosition = x+'px 0';

这会设置背景位置,首先是 X,然后是 Y。

工作示例here

【讨论】:

谢谢,一旦***允许我,我会点击“接受的答案”按钮:) 它是对的,但看看我的回答,从你的回答来看它工作正常。您的代码运行缓慢。 @Andy 是的,你是对的。我也投票赞成你的答案。冷静..我试过你的公式,但它的工作速度很慢。所以我把它从 60 改成了 30。祝你有美好的一天。

以上是关于backgroundPositionX 在 Firefox 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

quartus FIR IP核使用 FIR II

移动端持续集成(Jenkins+Gradle+fir.im)

IIR和FIR滤波

FIR滤波器的Matlab设计(含低通,高通,带通和带阻)

python中怎么生成基于窗函数的fir滤波器

FIR仿真教程__Altera FIR