html - 在透明导航栏下方显示网站背景

Question

我需要我的背景图像显示在我的网站透明导航栏下方。图像位于 .header div 下

http://prntscr.com/p2moi0

        <!Navigation Bar>
        <nav>
            <div class="navigation-bar">
                <img class="logo" src="images/logo-black.png">
                <a href="#">Home</a>
                <a href="#">Services</a>
                <a href="#">Pricing</a>
                <a href="#">faq</a>
                <a href="#">Contact</a>
            </div>
        </nav>

        <div class="header">
            <h1>Website development<br> made easy</h1>
            <h3>Not just a business but a reliable business partner</h3>
            <button type="button" class="button button-1">get started</button>
            <button type="button" class="button button-2">get a quote</button>
        </div>
    </body>

.header{
    background-image: url('images/main-background-header.png');
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    text-align: center; 

    .navigation-bar {
    width: 100%;
    height: 80px;
    background-color: transparent;
    }

Answer 1

要使其正常工作，将 background div 添加到 header 中，height 等于 full header height + 你的导航栏高度 .你的 navbar 应该有一个 -1 的 z-index 并且 background div 应该有一个相对于 absolute 的位置 header :

*{
  margin:0;
  padding:0;
}

.image{
background-image: url('https://picsum.photos/800');
    background-position: center;
    height: calc(100% + 80px);
  width:100%;
    background-repeat: no-repeat;
    position: absolute;
  z-index:-1;
    top: -80px;
    text-align: center; 
}
    .navigation-bar {
    width: 100%;
    height: 80px;
    background-color: transparent;
    }

.header{
  position:relative;
  text-align:center;
  color:white;
  padding:10px 0px;
}
.navigation-bar{
  display:flex;
  background:rgba(255,255,255,0.5);
  align-items:center;
}
.navigation-bar img{
  margin-right:10px;
}

.navigation-bar a{
  margin-left:10px;
  color:white;
  padding:10px;
  text-decoration:none;
}
.navigation-bar a:hover{
  background-color:white;
  color:black;
}

       <!Navigation Bar>
        <nav>
            <div class="navigation-bar">
                <img class="logo" src="images/logo-black.png">
                <a href="#">Home</a>
                <a href="#">Services</a>
                <a href="#">Pricing</a>
                <a href="#">faq</a>
                <a href="#">Contact</a>
            </div>
        </nav>

        <div class="header">
          <div class="image"></div>
            <h1>Website development<br> made easy</h1>
            <h3>Not just a business but a reliable business partner</h3>
            <button type="button" class="button button-1">get started</button>
            <button type="button" class="button button-2">get a quote</button>
        </div>
    </body>