简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Fügen Sie im HTML- und CSS-Bereich hinter der Navigationsleiste ein Hintergrundbild hinzu, damit beim Scrollen kein Leerzeichen angezeigt wird
P粉118698740
P粉118698740 2023-09-10 09:12:07
0
2
533

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.

P粉118698740
P粉118698740

Antworte allen(2)
P粉161939752
P粉1619397522023-09-11 00:57:37 2 Etage

我在对您的问题的评论中建议将背景图像应用于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>
Wie +0
Antwort hinzufügen
P粉562845941
P粉5628459412023-09-11 00:55:31 1 Etage

我不知道为什么你创建了一个新元素来放置 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！