如何移动图像的背景位置,使其在页面调整大小时保持在 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');
有什么想法吗?
最佳答案
你的 bgPos 函数 for .class2 应该看起来与你用于 class1 的 bgPos 函数非常相似,但是有一个水平增量(我使用值 500)
var w = $(window).width() - $('.container').width();
w = w/2-500;
$('.class2').css('background-position', w+'px 0')
此增量是调整大小时应在这些“绿色”跳跃之间保持的距离。你可以找到更好的值(value)来保持它的完美
关于javascript - CSS 背景位置随页面大小调整而移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31827347/