Question

我有一个我用作背景的gif，当它首次加载时它居中。当我开始滚动网站时，gif移动到最左边，再也不会居中。我认为我错过了一种可以在滚动时保持背景固定的CSS样式。它也可能是我的jQuery视差函数，它一直向左推。

以下是我使用的代码

// HTML

 <section class="box slide slide-1">
    <div class="container">
    <!--  <h1>Main Title</h1> -->
    </div>
  </section>

// CSS

section.box.slide {
padding: 240px 0;
background-position: 0 0;
/*  background-position: center;*/
}

section.box.slide h1 {
color: yellow;
font-size: 48px;
/*line-height: 1;*/
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px black;
}

section.box.slide-1 {
border: 1px solid white;
background: #D80000 url("../gif/lRoomWhiteRed.gif") no-repeat;
background-position: center;

 /* background-attachment: fixed;*/
 /* background-size: cover*/
 }

// jQuery for parallax

(function(){
 var parallax = document.querySelectorAll(".slide"),
  speed = .3;

 window.onscroll = function(){
 [].slice.call(parallax).forEach(function(p,i){

  var windowYOffset = window.pageYOffset,
      theBackgroundPos = "0 " + (windowYOffset * speed) + "px";

  p.style.backgroundPosition = theBackgroundPos;
  });
  };
 })();

Answer 1

我认为jQuery正在影响.slide类的所有元素。也许尝试在你的gif上删除这个类并以其他方式定位它。

当我向下滚动页面时，背景从居中移动到左边，如何在滚动时保持居中？

1 个答案: