1. 首頁
  2. 問答
  3. CSS位置全屏

CSS位置全屏

2016-02-13 63 views
0

你好，我正在處理一個視差滾動的例子，但有設置位置，使背景覆蓋整個屏幕的麻煩。滾動工作，但如果你看到屏幕周圍有一個白色的邊框。我希望它涵蓋所有的方式。CSS位置全屏

.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> 
 

 

 

 

 
     \t </div> 
 

 
     \t <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> 
 
     \t </div> 
 

 
     \t <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> 
 
     \t </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>

來源

2016-02-13 ed_laika

+0

'container-fluid'將填充設置爲15px – Jay

回答

3

你的問題是與容器和你分手引導的實際結構。 它總是應該看起來像這樣：

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

要解決這個問題，你需要給你的.container-fluid類row後的股利的權利，像這樣：

.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 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> 
 

 

 

 

 
     \t </div> 
 

 
     \t <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> 
 
     \t </div> 
 

 
     \t <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> 
 
     \t </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>

這它，你覆蓋:)

來源

2016-02-13 14:33:33

+0

謝謝你的幫助！ :) –

+0

沒問題。請記住標記爲已解決的答案適合您的需求！ –

1

只需使用下面的CSS：

.container-fluid{ 
    padding:0; 
}

來源

2016-02-13 14:40:15

+0

提供的代碼可能會有所幫助，但會進一步打破引導佈局背後的實際「邏輯」。 –

相關問題

 相關問題