Javascript 视差背景不'；我没排好队

我拥有的是一个带有视差打开页面的网站。不幸的是，文本部分似乎干扰了滚动背景，因此当页面滚动时，底部视差图像（应该是pc显示器的大小，然后覆盖文本）会重复，而不是水平居中

我使用的是我自己的简单JavaScript视差函数，但是由于我对JavaScript相对缺乏经验，所以我在努力解决这个问题。p> 看起来解决方法应该是在“home-image-3”部分的顶部添加一些填充，但是当我这样做时，图像仍然被分割（重复），文本部分添加了一个边距，并且不会停止重复图像。因此，我需要一个不同的解决方案

你可以在这里看到问题的实质

请注意，图像1和2（键盘和建筑物）工作正常，图像3（ps4）再次从图像的底部开始。几乎看不到，但令人恼火的是图像没有正确对齐

HTML

CSS

---

一个小小的改变就能解决我认为是你的问题。只需停止PS4背景重复并将背景设置为白色

#home-image-3 {
    background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

---

在看不见的情况下，很难尝试和帮助处理如此视觉化的东西。是否有一个网站我们可以看到这个问题的行动？抱歉的等待，我的上传速度是无意识的。我已经将链接添加到了主帖子中。虽然这确实有效（我已经做了更改，你现在可以在网站上看到），但这是一种欺骗。我也可以在图像顶部添加一些白色，这会将整个图像向下推，但这会增加图像的大小，如果可能的话，我宁愿避免这样做。我希望修复这些图像（因为如果我再添加一些，临时修复将不会转移到其他图像）。

$(document).ready(function(){
   // cache the window object
   $window = $(window);

   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);

      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                             
        var yPos = -($window.scrollTop() / $scroll.data('speed')); 

        // background position
        var coords = '50% '+ yPos + 'px';

        // move the background
        $scroll.css({ backgroundPosition: coords });    
      }); // end window scroll
   });  // end section function
}); // close out script

//creates html5 element in IE
document.createElement("section");

.darkgrey {
    background-color: rgb(30,30,30);
}

.shadow {
    box-shadow: 0px 0px 10px 2px black;
}

.border {
    border-style: solid;
    color: black;
    border-width: 1px;
}

div.overlay {
    position: absolute;
    top: 0px;
}

a.darken {
    display: block;
    background: black;
}

a.darken img {
    display: block;
    opacity: 0.9;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.25;         
}

h2.brighten, h4.brighten{
    display: block;
    opacity: 0;
    color: white;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover h2.brighten, a.darken:hover h4.brighten{
    opacity: 1;
}

.caption { 
  position: absolute;
  top: 40%;
  left: 0px;
  color: #ffffff; 
  text-align:center; 
  font-weight:bold; 
  opacity:0.7; 
  z-index: 10;
}

.relative {
    position: relative;
}

.fullwidth {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   max-width: 80% !important;
}

.fullheight {
    height: 100% !important;
}

.padding-10 {
    padding: 10px;
    margin-bottom: 0;
}

.padding-20 {
    padding: 20px;
}

.paddingtb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingtb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.margin-10 {
    margin: 10px;
}

.margin-20 {
    margin: 20px;
}

.margintb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margintb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.lightborder {
    border: 1px #5C5B5A solid;
    border-radius: 3px;
    transition: transform 500ms ease-in-out;
}

#home-image {
    background: url(../img/keyboard.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image {
        background: url(../img/keyboard1280.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image {
        background: url(../img/keyboard720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image {
        background: url(../img/keyboard480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-2 {
    background: url(../img/plymouth.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-2 {
        background: url(../img/plymouth.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-2 {
        background: url(../img/plymouth720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-2 {
        background: url(../img/plymouth480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-3 {
    background: url(../img/console.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-3 {
        background: url(../img/console1280.png) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-3 {
        background: url(../img/console720.png) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-3 {
        background: url(../img/console480.png) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-3 {
    background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}