Question

使用bootstrap 4制作我的项目的目标网页，例如this，html无法隐藏导航栏后面的背景图片

Answer 1

我已经在我的 Codepen 帐户上完成了此操作，唯一的区别是您必须更改我将徽标放到导航栏的位置并且不要将其设置为img的中心div，让它像你提供的例子一样推向顶端。

见下文：

<div class="header_img">

    <div class="row logo-container-div align-items-center justify-content-center">
     <div class="logo-wrapper col-auto" >
       <h1>LOGO HERE</h1>
       <p>Some additional text</p>
    </div>
    </div>
  </div>

CSS：

.header_img {
    height: 800px;
    width: 100%;
    background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
    background-position: 0%, 0%, 50%, 50%;
    background-attachment: scroll, fixed;
    background-size: auto, cover;
}


.logo-container-div {
  min-height: 70vh;

}

.logo-wrapper {

    font-family: 'Raleway', sans-serif;
    padding: 25px 30px;
    border: 2px solid white;
    color:#fff;
    text-align:center;
    position: fixed;

  }

.logo-wrapper h1 {
  font-size: 36px;
}

.logo-wrapper p {
 font-size: 18px; 
}

请在此处查看：https://codepen.io/billyfarroll/pen/qYWYYV

您需要flex：justify和align元素以及background-position＆amp; background-size

Answer 2

我的理解是，您在滚动页面后隐藏了导航栏后面的图像，为此必须修复导航栏。您只需将“position：fixed”用于导航栏类。

导航栏后面的图像

2 个答案: