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動畫在背景圖像中淡入淡出的示例