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

实施例

＆＃13;

* {
    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');
}

＆＃13;

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

＆＃13;

fiddle

Answer 2

所以我通过重复图像来解决这个问题。正如我在评论中提到的，我刚刚发现问题的症结所在。每当您从最顶层开始在网站上滚动时，每个图像都会开始移动。这意味着当你到达网站的底部时，那里的图像已经移动太多而且不在div中。

例如，我改变了

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

到

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

并为每个具有视差的div或图像重复执行此操作。

我对性能有点担心并注意到我的笔记本电脑在重复图像时会升温，我有一台非常强大的机器（rMBP 15“）。如果有人有更好的解决方案，请在此发布。

视差图像太多

2 个答案: