背景图像不会褪色

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的背景图片了。