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）淡入/淡出背景imgae（A），则需要将它们放在单独的div中，并应用于不透明过渡。

如果只需要淡出backgorund图像，则只能将其放在父容器内的单独元素上，并应用于该不透明度过渡。

这是一个如何通过CSS3动画在背景图像中淡入淡出的示例