javascript - css 过渡背景变化不顺利淡入淡出

Question

当用户向下滚动时，我试图在标题的新背景中淡入淡出。我希望它在原始背景之上平滑地淡入。

相反，正在发生的是，它正在删除原始背景，然后淡入新背景。这使得当用户向下滚动时过渡看起来很难看...

HTML

<div id="navbar" class="navbar">
</div>

CSS

#navbar {
  transition:  background 0.5s ease-in 0s;
}

.navbar {
  background: url("images/nav-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 75px;
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
  position: relative;
  z-index: 1;

}
.navbar.fade-blue {

    background:#566c75;

}

JS

jQuery(document).ready( function() {

jQuery(window).scroll(function() {

    if ( jQuery(window).scrollTop() > 20) {
        jQuery(".navbar").addClass("fade-blue");
    } 

    else {
        jQuery(".navbar").removeClass("fade-blue");
    } 
});
});

编辑:我更改了 .fade-blue 类，因为那里有两个背景规则，我试图将背景图像淡入颜色。

Answer 1

如果你想用另一个 (B) 淡入/淡出你的背景图像 (A)，你需要将两者放在一个单独的 div 中，并对它们应用不透明度过渡。

如果您只需要淡出您的背景图像，您只能将它放在父容器内的单独元素上，并对其应用不透明度过渡。

举个例子 How to fade in background image by CSS3 Animation