背景圖像不會褪色

Question

我試圖讓這個背景圖像淡入到div中，一旦用戶滾動到它的中間。 。眼下，背景畫面出現，但不褪色在這裏有一個小提琴：http://jsfiddle.net/8eudrmcx/

HTML

div { 
    background-color: #000; 
    height: 500px; 
    width: 500px; 
} 

JS

function isScrolledIntoView($elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $elem.offset().top; 
    var elemMiddle = elemTop + $elem.height()/2; 
    return docViewBottom >= elemMiddle && docViewTop <= elemMiddle; 
} 
$(window).scroll(function(){ 
    $elem = $("div"); //or what element you like 
    if(isScrolledIntoView($elem)){ 
     $elem.css('background-image','url("img/background.jpg")').fadeIn(); 
    } 
}); 

Answer 1

所以你在div不是背景褪色圖像與您的代碼。 div是可見的。

http://jsfiddle.net/8eudrmcx/1/

http://jsfiddle.net/8eudrmcx/2/

設置div來display: none，它會褪色。您可以設置在CSS的背景圖片了。