移动浏览器中的绝对图像不会保持绝对

Question

为了使图像静止并在这些图像上滚动div的其余部分，我在网页中使用了背景图像，绝对位置和-1 z-index。它在Web浏览器中的工作完美无瑕，但我无法在手机中获得相同的功能。网页浏览器中的移动视图显示了它应该工作的方式，但其余的div不会在移动浏览器中滚动浏览这些图像，而与web浏览器不同，图像也会滚动。

下面是JsFiddle link下面的代码。

HTML

<div class="container"> 
    <div class="section1">lorem ipsum dolar imit</div> 
    <div class="section3"> 
     <div class="section3-img"></div> 
    </div> 
    <div class="section1">lorem ipsum dolar imit</div>  
</div> 

CSS

body{margin:0; padding:0;} 
.container{height:800px; position:relative;} 
.section1{ 
    width:100%; 
    height:400px; 
    background-color:purple; 
    color:white; 
    z-index:10; 
} 
.section2, .section3{ 
    width:100%; 
    height:300px; 
    overflow:hidden; 
    position:relative; 
} 
.section3-img{ 
    background-size: cover; 
    z-index:-100; 
    width:100%; 
    height:300px; 
    position:absolute; 
    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed; 

}

PS：我在android手机chrome浏览器还没有测试。

Answer 1

那么，我宁愿放置一个固定图像的容器。 因为，你的section3和section3-img容器滚动。因此，将背景图像定位为固定的会导致问题被固定为什么？ 很明显，移动浏览器将其定义为固定给家长。并且因为父容器随着滑动而移动，所以背景图像也是如此。

予定位的固定的div：https://jsfiddle.net/mh7eza4e/8/

HTML

<div class="container"> 
    <div class="bg-img"></div> 
    <div class="section1">lorem ipsum dolar imit</div> 
    <div class="section3"></div> 
    <div class="section1">lorem ipsum dolar imit</div> 
</div> 

CSS

html,body{margin:0; padding:0;height:100%;} 
.container{height:800px; position:relative;} 
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;} 
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;} 

.bg-img{ 
    position:fixed;z-index:-100; 
    width:100%;height:100%;height:100vh; 
    /* "height:100%" as a fallback for older browsers, use only if needed */ 

    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed; 
    background-size:cover; 
} 

---

如果多个固定的背景图像的每个秒重刑是你追求的，那么恐怕这对纯粹的CSS来说是不可能的。你需要从这里使用JS。

在这里看到：https://jsfiddle.net/mh7eza4e/17/

JS

$(window).on('scroll', function() { 

    var scrolledTop = $(window).scrollTop(), 
     windowHeight = $(window).height(); 

    $('.section').each(function() { 
     var $section = $(this), 
      elemTop = $section.offset().top, 
      sectionHeight = $section.outerHeight(); 

     if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) { 
      $section.addClass('active'); 
     } else { 
      $section.removeClass('active'); 
     } 
    }) 
}); 

$(window).trigger('scroll'); 

根据相对于我设置'活跃'类目前在视口中的部分视滚动位置上。活动部分触发多个固定位置的背景图像容器的CSS转换（使用不透明度）。