CSS视差问题

Question

我的视差代码有一些问题。当你滚动时，我试图得到无缝的外观，但问题是我似乎不知道如何定位背景，使他们不只是打破和重复相同的图像。我已经尝试了我能想到的所有方法来解决这个问题，但似乎找不到中间地带。任何建议都会很棒。

(function(){
  var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;
  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){
      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "0 " + (windowYOffset * speed) + "px";
      
      el.style.backgroundPosition = elBackgrounPos;
    });
  };
})();

.empty_canvas_content {
box-shadow:none !important;
}
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: 'proxima_nova_rgregular', sans-serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 12px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
	margin: 0 auto;
	background-color:#fff;
	font-family: 'proxima_nova_rgregular', sans-serif;
	color: #000;
	font-size:12px;
	letter-spacing:0px;
}
section.module.parallax {
  padding: 240px 0;
  background-position: 0 0;
}
section.module.parallax h1 {
  color: #1e1e1e;
  font-size: 48px;
  font-family: 'proxima_nova_rgregular', sans-serif;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
/* These are the mobile images, push graphic to the left */
section.module.parallax-1 {
  background-image: url("http://s3.postimg.org/3oyk0ti1v/untitled4.jpg");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}
section.module.parallax-2 {
  background-image: url("http://s15.postimg.org/keyjegc6z/story2_mobile.jpg");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}
section.module.parallax-3 {
  background-image: url("http://s3.postimg.org/5v3hkow6r/pattern3.png");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax {
    padding: 300px 0;
  }
  
  section.module.parallax-1 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  section.module.parallax-2 {
	background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
  }
  section.module.parallax-3 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
  section.module.parallax-1 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  section.module.parallax-2 {
	background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
  }
  section.module.parallax-3 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  
}

<div class="deleteme" style="max-width:1140px; margin: 0 auto;">
<p><section class="module parallax parallax-1">
<div class="holditin">
<center><img src="http://s22.postimg.org/k71wcjnm9/logo.png" width="90%"></center>
</div>
</section>
<section class="module content">
<div class="holditin">
<h2><center>Venture in Style Dream Road Trip Giveaway!</center></h2>
<center><p>Have you ever dreamed of going on the road trip of a lifetime? Maybe it's renting an RV and exploring Route 66? Or driving through the mountains on the Blue Ridge Parkway? Whatever it is, we want to hear about it.</p></center>
</div>
</section>        <section class="module parallax parallax-2">
<div class="holditin">
<h1>Shape</h1>
</div>
</section>        <section class="module content">
<div class="holditin">
<h2><center>We're awarding one lucky winner $5,000 to take it!</center></h2>
<center><p>Tell us in a video that is between 30 seconds and 2 minutes long what your dream road trip is! Upload it below or post it to your Instagram page using <strong>#ventureinstyle</strong> to be entered for a chance to win.</p></center>
</div>
</section>        <section class="module parallax parallax-3">
<div class="holditin">
<h1>Colour</h1>
</div>
</section>        <section class="module content">
<div class="holditin">
<h2><center><font style="letter-spacing:2px;">BE CREATIVE!</font></center></h2>
<center><p>Entries will be judged on creativity and lenght, so make sure your video stands out and meets the required length (:30-2:00).</p></center>
</div>
</section>
</div>

谢谢!

Answer 1

这是视差效果非常常见的一面。由于图像的位置在每次滚动时都会发生变化，因此图像将在某个点上剪切。下面是一些解决方案和一些需要注意的关键思想:-

1. 使用重复背景 -通过使用重复背景，您可以避免裁剪背景。只是使用一个重复的图像，似乎他们的图像上没有边缘。这个想法被广泛用于视差背景，因为它提供无缝的背景效果。
2. 增加图像大小 -这也是一个修复视差背景，你要做的是增加背景的大小。我们主要使用background-size:cover;，但为了覆盖视差区域，您可以使用background-size:150% auto;进行肖像(宽度<高度)类型的图像或使用background-size: auto 150%;的景观(宽度>高度)类型的图像。百分比必须大于100%，这样它才能覆盖任何屏幕上的整个视差区域。

第二点取决于图像的大小/分辨率/屏幕尺寸。

谢谢。