Question

我正在尝试复制Paypal的导航栏及其下方的部分用于培训目的。我在其中创建了一个容器流体和两行。我已经设置了这个容器的背景图像但是......它只覆盖了它应该的两行中的一行，为什么？

.container fluid {
  width:100%;
  height:100%;
  background-image:url('https://www.paypalobjects.com/webstatic/en_GB/mktg/wright/home/homepage-hero-1x.jpg');

<div class="container-fluid">
  
  <div class="row1">
    <div class="col-md-2">
      <a href="https://www.seeklogo.net/?p=72581" target="_blank"><img id="pp"src="https://www.seeklogo.net/wp-content/uploads/2015/11/paypal-logo-preview-400x400.png"  alt="PayPal logo vector" /></a> 
    </div
    
    <div class="col-md-4 offset-md-4">
      <ul>
        <li>PERSONAL <i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li>BUSINESS  <i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li>PARTNERS & DEVELOPERS</li>
      </ul>
      
      <button  id="login"class="buttons" type="btn">Log in</button>
      <button id="signup"class="buttons"type="btn">Sign up</button> 
    
    </div>
    
    <div class="row2">
      <h1>The simpler, safer way to<br>pay and get paid.</h1>
    </div>
    
  </div>

https://codepen.io/zeeebra/pen/MvYOwj?editors=1100

Answer 1

您可以尝试在滚动时不会移动的背景中提供固定图像。请尝试以下代码。

.box{
  height: 100vh;
  width: 100%;
  background-size: cover;
  display: table;
  background-attachment: fixed;
  background-image: url(1.jpg);
}

只需替换图片名称即可。我希望这有帮助！

如何为整个Bootstrap容器流体设置背景图像？

1 个答案: