html - 导致容器在我的菜单栏上重叠的视差效果

Question

我目前有一个视差效果，它可以在宽度大于 1700 像素的屏幕尺寸上正确显示所有填充。

但是如果将浏览器缩小或使用分辨率为 1600px 的计算机，文本将溢出到我的侧边栏上，并且由于视差，这只会发生在我的索引页面上。

HTML

 <header style="height: 1000px; width 100px">
       <section>
        ..navigation bar
       </section>

      <div id="page-content-wrapper">
          <div id ="text_slider">
              <div><p>Text 1</p></div>
                  <div><p> Text 2</p></div>
                     <div><p> Text 3</p></div>
                  </div>
           </div>
      </div>
     <script>

        $('#text_slider div:first')
            .fadeOut(500).next().fadeIn(1000).end().appendTo('#text_slider');

        }, 3000);
    </script>
</header>

CSS:

header{
    background: url(../img/orange.jpg);
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 100%;
}

This is the image with a smaller sized browser at 1700px

This is the image with a smaller sized browser at 1800px +

Answer 1

你已经将 css 与 html 结合起来了。请引用 bootstrap 3。

你使用了容器内的容器流体。

改变你的类=“col-sm-10.col-md-9.pull-right”进入html 中的 class="col-sm-10 col-md-9 pull-right"