javascript - CSS 背景位置随页面大小调整而移动

Question

如何移动图像的背景位置，使其在页面调整大小时保持在 2 个元素之间？

我设法使用一些 Javascript 让它在第一个上工作，但同样的功能在第二个上不起作用。

这就是我得到的。 Here's the link .

底部叶子移动太多，我需要它留在猫和文本之间

这是我为第一片叶子准备的 Javascript。

function bgPos(){
    var w = $(window).width() - $('.container').width();
    w = w*2;
    $('.class2').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');

有什么想法吗？

Answer 1

你的 bgPos 函数 for .class2 应该看起来与你用于 class1 的 bgPos 函数非常相似，但是有一个水平增量(我使用值 500)

var w = $(window).width() - $('.container').width();
w = w/2-500;
$('.class2').css('background-position', w+'px 0')

此增量是调整大小时应在这些“绿色”跳跃之间保持的距离。你可以找到更好的值(value)来保持它的完美