滚动css背景图片

Posted 2023-05-08

【中文标题】滚动css背景图片

【英文标题】：Scroll css background image

【发布时间】：2011-09-23 08:43:36

【问题描述】：

我正在寻找帮助移动我的容器 bg 以根据“scrollTop”移动，我写了这个函数，但不起作用。任何人帮助我。我决定用平滑的方式移动我的背景图像。

  $(window).scroll(function()
var moveSize = $(window).scrollTop();
$('#container.takeover1').animate( 
    backgroundPosition: "0px "+ parseInt(-moveSize)+'px',
    easing: 'swing'
    , 3000 );

);

有人帮帮我吗？提前致谢。

【问题讨论】：

如果您只是想在窗口滚动时保持页面上的背景静态，为什么不在 CSS 中使用 background-attachment: fixed？

【参考方案1】：

尝试使用负垂直位置，例如

backgroundPosition: 0 -100px

【参考方案2】：

$('.bg').scroll(function()
var x = $(this).scrollTop();
$(this).css('background-position','0% '+parseInt(-x/10)+'px');
);

FIDDLE DEMO