CSS位置全屏

时间：2016-02-13 14:29:15

标签： css twitter-bootstrap

您好我正在使用视差滚动示例但是设置位置时会遇到麻烦，以便背景覆盖整个屏幕。滚动有效但如果您看到屏幕周围有白色边框。我希望它涵盖所有方面。

.ha-bg-parallax {

    background: url(https://www.geziceki.com/wp-content/uploads/2015/09/32617393_xl.jpg) no-repeat fixed;

    -moz-background-size: cover;

    -o-background-size: cover;

    -webkit-background-size: cover;

    background-size: cover;

    height: 100vh;

    margin: 0 auto;

    width: 100%;

    display: table;

    vertical-align: middle;

}



.ha-bg-parallax .ha-parallax-body {

    display: table-cell;

    vertical-align: middle;

}



.ha-bg-parallax .ha-content-whitecolor {

    font-size: 17px;

    color: #ffffff;

    width: 45%;

    margin: auto;

}



.ha-bg-parallax .ha-diamond-divider-md {

    margin: 15px 0px;

}



.ha-bg-parallax .ha-heading-parallax {

    font-style: italic;

    font-weight: bold;

    text-transform: none;

    color: #ffffff;

    padding-bottom: 0px;

}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">

      <div>

              <div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20">

          <div class="ha-parallax-body">
            <div class="col-md-2 col-md-offset-5">
        <img class="img-circle img-responsive" alt="me" src="image/me.jpg">



        </div>
        <div class="col-md-2 col-md-offset-5">
  <h1><span class="element"></span></h1>



      </div>

              <div class="ha-parallax-divider-wrapper">

                  <span class="ha-diamond-divider-md img-responsive"></span>

              </div>



          </div>

      </div>


      <div class="container">
      <h2>Normal</h2>


          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
          <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

          </div>




      	</div>

      	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
            <h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

    </div>
      	</div>

      	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
    <h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

    </div>
      	</div>

      </div>
  </div>





      </div>

  </div>

  <div class="container">
  <h2>Normal</h2>


      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

      </div>




    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
        <h1>Mobile and Desktop</h1>
  <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

</div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
  <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

</div>
    </div>

  </div>
</div>





  </div>

</div>
<br>


</body>
</html>

2 个答案:

答案 0 :(得分：3)

您的问题在于容器，并且您破坏了引导程序的实际结构。 它总是应该看起来像这样：

.container
    .row
        .col-??-??

要解决此问题，您需要在.container-fluid班级row之后立即提供div：

＆＃13;
＆＃13; 
.ha-bg-parallax {

    background: url(https://www.geziceki.com/wp-content/uploads/2015/09/32617393_xl.jpg) no-repeat fixed;

    -moz-background-size: cover;

    -o-background-size: cover;

    -webkit-background-size: cover;

    background-size: cover;

    height: 100vh;

    margin: 0 auto;

    width: 100%;

    display: table;

    vertical-align: middle;

}



.ha-bg-parallax .ha-parallax-body {

    display: table-cell;

    vertical-align: middle;

}



.ha-bg-parallax .ha-content-whitecolor {

    font-size: 17px;

    color: #ffffff;

    width: 45%;

    margin: auto;

}



.ha-bg-parallax .ha-diamond-divider-md {

    margin: 15px 0px;

}



.ha-bg-parallax .ha-heading-parallax {

    font-style: italic;

    font-weight: bold;

    text-transform: none;

    color: #ffffff;

    padding-bottom: 0px;

}
＆＃13; 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">

      <div class="row">

              <div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20">

          <div class="ha-parallax-body">
            <div class="col-md-2 col-md-offset-5">
        <img class="img-circle img-responsive" alt="me" src="image/me.jpg">



        </div>
        <div class="col-md-2 col-md-offset-5">
  <h1><span class="element"></span></h1>



      </div>

              <div class="ha-parallax-divider-wrapper">

                  <span class="ha-diamond-divider-md img-responsive"></span>

              </div>



          </div>

      </div>


      <div class="container">
      <h2>Normal</h2>


          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
          <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

          </div>




      	</div>

      	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
            <h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

    </div>
      	</div>

      	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
    <h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

    </div>
      	</div>

      </div>
  </div>





      </div>

  </div>

  <div class="container">
  <h2>Normal</h2>


      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
      <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

      </div>




    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
        <h1>Mobile and Desktop</h1>
  <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

</div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<h1>Mobile and Desktop</h1>
  <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>

</div>
    </div>

  </div>
</div>





  </div>

</div>
<br>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

它，你被覆盖了：）

答案 1 :(得分：1)

请使用下面的css：

.container-fluid{
   padding:0;
}
相关问题
最新问题