圖像淡入但掩蓋了原本在div中的文字

我有一個帶有隱藏圖像的div和另一個div。當用戶向下滾動到div的中間點時，圖像淡入。但是，我想保留其他div中的文本可見。這裏是一個小提琴，以清除任何混淆：http://jsfiddle.net/8eudrmcx/16/圖像淡入但掩蓋了原本在div中的文字

請注意，隨着圖像淡入，文本被遮住了。我知道這是正常行爲，但我很難理解我如何保持文本可見（和可選）。

HTML

<section> 
    <img src="http://www.billboard.com/files/styles/promo_650/public/stylus/2029269-marilyn-manson-Agata-Alexander-617-409.jpg" class="overlay" /> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</section>

CSS

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

.overlay { 
    display: none; 
    position: absolute; 
    height: 500px; 
    width: 500px; 
}

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 = $("section"); //or what element you like 
    if(isScrolledIntoView($elem)){ 
     $('.overlay').fadeIn(); 
    } 
});

來源

2014-09-25 J82

你需要覆蓋的Z-index和欄目播放http://jsfiddle.net/8eudrmcx/17/

section { 
     background-color: #000; 
     color: #fff; 
     height: 500px; 
     width: 500px; 
     position: relative; 
     z-index: 1; 
    } 
    .overlay { 
     display: none; 
     position: absolute; 
     height: 500px; 
     width: 500px; 
     z-index: -1; 
    }

來源

2014-09-25 21:24:22

應用z-index。

z-index定義了元素必須放置的層，並且只有非靜態定位的元素纔可以具有z-index，即相對絕對。

這是你如何做到這一點：

.overlay { 
    position: relative; 
    z-index: 1; 
} 

section p { 
    position: relative; 
    z-index: 2; 
}

這裏有一個很好的介紹的z-index在MDN： Understanding CSS z-index

來源

2014-09-25 21:24:11

圖像淡入但掩蓋了原本在div中的文字

回答

相關問題