Question

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

下

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

尝试这样

HTML

     <div class="banner"> 
<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>
        </div>

css

  .banner{
  background-image: url('https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg');
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    text-align: center; 
    padding:40px 0;
    }

    .nav {
    width: 100%;
    height: 80px;
    background-color: transparent;
    text-align:center;
    }

Answer 2

只需重置元素边距即可。这是通过制作每个元素来完成的 保证金：0 。参见下面的示例：

*{
  margin: 0;
}

.header{
  background-image: url('https://i.cbc.ca/1.4955357.1545355364!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/man-works-late-at-office-computer.jpg');
    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;
    }

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

Answer 3

要使其正常工作，请将background div添加到您的header中，其中height等于full header height +您的navbar height 。您的navbar的{{1}}应该为-1，而z-index div应该相对于background有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;
}

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

3 个答案: