1

我有一个带有背景图像、颜色和混合模式的标题：乘法。在滚动时，我垂直更改背景位置以创建视差效果。在 Firefox 中，它加载正常，但在滚动时，背景图像的位置错误。它应该从 50% 50% 开始，并且在向下滚动时 y 位置增加。但是在 Firefox 中，当我开始滚动时它会跳到 20% 左右（css 仍然应该显示 50+%），然后继续从那里移动。当我在检查器中弄乱背景位置并将其设置为 0% 时，它看起来像这样： 在此处输入图像描述

此外，如您所见， background-blend-mode:multiply 也停止在滚动上工作。为什么是这样？当您使用 jquery 更改背景位置时，Firefox 不喜欢它吗？

代码：

var lastst = 0;
$(window).scroll(function(){
    var st = $(window).scrollTop();
    $('.toppbild').each(function(){

        if(st <= $(this).height() + $('#header').height() && $(window).width() > 65 && st < lastst +1){
            $(this).css({
                'background-position': '50% ' + parseFloat(50+st/100*7) + '%',
            });
        }
    });
    lastst = st;
});

编辑：我在不使用背景混合模式的其他页面上具有相同的视差效果，并且在这些页面上，背景位置的行为应如此。Soo .. 我猜混合模式会导致背景定位错误？我很困惑。

4

0 回答 0