社区
学习
工具库
AI工具
休闲
搜索
简体中文
尝试在导航栏后面的 html 和 css 中添加背景图像，以便滚动时不会显示空间
P粉118698740
P粉118698740 2023-09-10 09:12:07
0
2
577

我不知道如何使 html 和 css 中的背景图像填充在导航栏和页脚下方。当我滚动导航栏的空间只是一个空白时，我希望它滚动时顶部和底部没有空间。谢谢！

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

我尝试更改 css 和 html 上的代码，但似乎没有任何改变结果。

P粉118698740
P粉118698740

全部回复(2)
P粉161939752
P粉1619397522023-09-11 00:57:37 2 楼

我在对您的问题的评论中建议将背景图像应用于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>
点赞 +0
添加回复
P粉562845941
P粉5628459412023-09-11 00:55:31 1 楼

我不知道为什么你创建了一个新元素来放置 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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板