平滑更改背景图像答案

【问题标题】：Change background image smoothly平滑更改背景图像
【发布时间】：2014-06-19 04:35:19
【问题描述】：

当页面以 50%、20%、10% 的速度滚动时，我尝试将更改的背景效果附加到正文中

下面是示例代码：

HTML：

<div>
   <p>...</p>
   <!-- more <p> elements below -->
</div>

还有脚本：

jQuery(window).scroll(function () {
   var JarakScroll = 200; // jarak scrol
   var JumlahJarakPasScroll = jQuery(window).scrollTop();
   if (JumlahJarakPasScroll > JarakScroll) {
       jQuery('html').addClass('scrolled');
   } else {
       jQuery('html').removeClass('scrolled');
   }
});

背景变了，但没有效果，谁能帮忙套个好看的效果？

【问题讨论】：

你想要什么样的效果？褪色？
任何，只要它的流畅。不具体。

标签： javascript jquery html css

【解决方案1】：

如果您希望背景图像以良好的效果进行更改，最好将背景图像应用于两个具有 100% 宽度和 100% 高度的主体的 div，并使用 z-index 正确放置。

更具体地说，将第一个 div 放在第二个 div 的顶部，当您想要更改背景图像时，将第一个 div 淡出。这将是一个整洁的效果。我假设您可以自己编写代码。

【讨论】：

感谢您的建议。