Question

我有一个隐藏图像的div和其中的另一个div。当用户向下滚动到div的中间点时，图像会淡入。但是，我想保持另一个div中的文本可见。这是一个清除任何混淆的小提琴：http://jsfiddle.net/8eudrmcx/16/

注意文本在图像淡入时如何被掩盖。我明白这是正常的行为，但我对如何保持文本可见（和可选择）感到难过。

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;
}

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

Answer 1

您需要使用叠加层和索引http://jsfiddle.net/8eudrmcx/17/

的z-index

   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;
    }

Answer 2

申请z-index。

z-index定义了一个元素必须放置的层，只有非静态定位的元素可以有z-index，即相对，绝对。

您就是这样做的：

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

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

这是对MDN的z-index的一个很好的介绍： Understanding CSS z-index

图像淡入但最终掩盖了div中的文本

2 个答案: