Fügen Sie im HTML- und CSS-Bereich hinter der Navigationsleiste ein Hintergrundbild hinzu, damit beim Scrollen kein Leerzeichen angezeigt wird

Question

Ich weiß nicht, wie man in HTML und CSS ein Hintergrundbild unterhalb der Navigationsleiste und der Fußzeile ausfüllt. Wenn ich durch die Navigationsleiste scrolle, ist das Leerzeichen nur ein Leerzeichen. Ich möchte, dass es ohne Leerzeichen oben und unten scrollt. Danke!

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url("http://placekitten.com/g/500/500");
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    height: auto;
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">The Backyard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#events">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="background-container"></div>
  <div class="logo-container">
    <img src="http://placekitten.com/g/100/100" alt="Logo">
    </div>

<footer class="footer">
  <div class="container">
    <p>The Backyard<br>
      at Boca Fiesta & Palomino<br>
      232 1/2 SE 1st st.<br>
      Gainesville, FL 32601</p>
  </div>
</footer>

Ich habe versucht, den Code im CSS und HTML zu ändern, aber nichts schien die Ergebnisse zu ändern.

Answer 1

我在对您的问题的评论中建议将背景图像应用于body，但我无法想象您将如何以这种方式应用不透明度。因此，只需将

移动到页面顶部即可。

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url("http://placekitten.com/g/500/500");
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    height: auto;
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="background-container"></div>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">The Backyard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#events">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

  <div class="logo-container">
    <img src="http://placekitten.com/g/100/100" alt="Logo">
    </div>

<footer class="footer">
  <div class="container">
    <p>The Backyard<br>
      at Boca Fiesta & Palomino<br>
      232 1/2 SE 1st st.<br>
      Gainesville, FL 32601</p>
  </div>
</footer>

Answer 2

我不知道为什么你创建了一个新元素来放置 BG 图像，而不是仅仅将其放在 标签上，但你的问题是因为在小屏幕上您在 .background-container 元素上设置 height:auto 的尺寸。

您已经创建了一个元素，将其固定位置，然后将其设置为 100% 高、100% 宽。当屏幕尺寸较小并且您设置 height:auto 时，该元素的高度为 0px，因为该元素内部没有任何内容。

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

.background-container {
  background-image: url("http://placekitten.com/g/500/500");
  background-size: cover;
  background-position: center;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  background-repeat: no-repeat;
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%; /* Adjust the height as needed */
}

.logo-container img{
  max-width: auto;
  max-height: 600px;
  text-align: center;


}

@media screen and (max-width: 768px) {
  /* Adjust background image for mobile devices */
  .background-container {
    background-position: center;
    /*height: auto;*/    /* <=======  REMOVE THIS */
  }
}

.footer {
  padding: 25px 0;
  background-color: #f2f2f2;
  bottom: 0;
  width: 100%;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: auto;
}


@media (max-width: 768px) {
  .logo-container {
    margin-top: 50px;
  }


  .footer {
    position: relative;
  }
  .navbar {
      position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">The Backyard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#events">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="background-container"></div>
  <div class="logo-container">
    <img src="http://placekitten.com/g/100/100" alt="Logo">
    </div>

<footer class="footer">
  <div class="container">
    <p>The Backyard<br>
      at Boca Fiesta & Palomino<br>
      232 1/2 SE 1st st.<br>
      Gainesville, FL 32601</p>
  </div>
</footer>