向下滚动时如何混合背景图像

Question

我有一页网站，我想在向下滚动时淡出 <body 背景。我试过 jQuery 但似乎无法找到正确的选择器。我可以让 <body 元素淡出，但 background-image 保持完全不透明。我试过：

 $(window).scroll(function() {
    $("body").css({
        'opacity': 1 - (($(this).scrollTop()) / 250)
    });
    });

Answer 1

您正在尝试降低 body 的不透明度，这意味着在滚动时它将隐藏全部内容，我认为如果您在 body 下方创建一个新的 div 然后将div 上的大图片直接或作为背景图片，并将 div 属性设置为绝对宽度和 100% 宽度高度，然后像这样添加你的js

$(window).scroll(function() {
$("new div id ").css({
'opacity': 1 - (($(this).scrollTop()) / 250)
})
});

how to blend-out a background image when scrolling down