javascript - 视差图像太多

Question

我正在制作一个静态网站，其中有太多视差图像。基本上每个部分都由视差图像分隔。现在我面临的问题是，当我正在构建我的网站并添加部分和更多视差图像时，网站底部附近的一些图像正在移出框架。我的意思是，图像可能从错误的位置开始，然后当我滚动时，它们最终移出它们的 div 或框架，我看到图像下方的空白区域。

但并非所有图像都会发生这种情况；只有网站底部附近的图像会遇到此问题。而且，图像越低，这个问题就越明显。

这是我插入视差图像的代码:

<div class="section parallax light-translucent-bg parallax-bg-5">
  <div class="container">
    <div class="call-to-action">
    </div>
  </div>
</div>

这是这个 div 的 CSS:

.parallax-bg-5 {
  background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}

Answer 1

使用background-attachment: fixed

例子

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
h1,
h2 {
    color: #fff;
    text-align: center;
    padding: 25px 0;
    margin: 0;
}
.block-parallax {
    overflow: hidden;
    position: relative;
}
.block-parallax .parallax-bg {
    background-attachment: fixed;   
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    min-width: 1170px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.block-parallax .md-box {
    padding: 200px 0 200px;
    background: rgba(0, 0, 0, 0.75);
    position: relative;
    height: 100%;
    text-align: center;
}
.block-parallax-1 .parallax-bg {    
    background-image: url('http://healthfitnessrevolution.com/wp-content/uploads/2013/10/Olympic_Boxing-featured-image.jpg');
}
.block-parallax-2 .parallax-bg {
    background-image: url('http://www.seankernan.com/data/photos/201_1kampala_boxing_3273.jpg');
}
.block-parallax-3 .parallax-bg {
    background-image: url('http://www.omaa.org.uk/sites/default/files/Boxing-008.jpg');
}
.block-parallax-4 .parallax-bg {
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSw56f8j5e70Gl8gZtH4Qgmq9wTo-aG3u3ZTgx6Uhs1M8ljMoU0Sg');
}
.block-parallax-5 .parallax-bg {
    background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2014/08/boxing-hd-wallpapers-of-high-resolution-free.jpg');
}
.block-parallax-6 .parallax-bg {
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS65xrl17ug548Rzu04Ahb6oeMAVkg2mGtyNY2t4TllnaMqfCKA');
}
.block-parallax-7 .parallax-bg {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC8mBv8rOCIQ8pg7eaj3-6croM0P75HnbwVJgarkOTpFwSj9U6');
}
.block-parallax-8 .parallax-bg {
    background-image: url('http://thumbnails.cbsig.net/CBS_Production_Showtime/CBS_Production_Showtime/2009/09/25/Sports/Boxing/193/694/boxing_supersix_farhood_cbsan.jpg');
}
.block-parallax-9 .parallax-bg {
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2XSMnKMHMD5Rn8LvbfD6hGWGLlIrWwczW433sMgfpuSh3iU1Agw');
}
.block-parallax-10 .parallax-bg {
    background-image: url('http://www.mymmainfo.com/wp-content/uploads/2011/12/pay-per-view-boxing.jpg');
}

<section class="block-parallax block-parallax-1">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 1</h1>
    </div>
</section>
<section class="block-parallax  block-parallax-2">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 2</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-3">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 3</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-4">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 4</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-5">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 5</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-6">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 6</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-7">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 7</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-8">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 8</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-9">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 9</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-10">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 10</h2>
    </div>
</section>

fiddle