css過渡背景變化不會順利淡化

我想在用戶向下滾動時在標題的新背景中淡入淡出。我希望它能夠在原始背景之上順利淡入淡出。css過渡背景變化不會順利淡化

取而代之的是，它將刪除原始背景，然後淡入新的背景。這使得過渡看起來醜陋當用戶滾動下來...

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; 

}

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類，因爲我有兩個背景規則，我試圖淡入背景圖像變成一種顏色。

來源

2014-05-02 Adrian

你可以不褪色一個背景圖像轉換成另外一個，因爲你只能在一個時間（不完全正確，但足夠接近）有一個背景圖像。 – Archer

正如@Archer所說，你只能同時擁有背景圖像，但是如何使用第二個背景圖像添加其他元素並淡入該元素。 –

@Adrian有2個圖像正確嗎？一箇舊的和一個新的？在CSS中的網址似乎是相同的.. –

如果你想淡入/淡出你的背景imgae（A）與另一個（B），你需要把兩個在一個單獨的股利，並適用於那些不透明的過渡。

如果您只需要淡出您的backgorund圖像，則只能將其放在父容器中的單獨元素上，並應用於該不透明度轉換。

下面的例子 How to fade in background image by CSS3 Animation

來源

2014-05-02 09:54:13 keypaul

css過渡背景變化不會順利淡化

回答

相關問題