如何让区块背景图显示在半透明导航栏下方？

要实现背景图延伸至半透明导航栏下方，同时保持导航栏悬浮在顶部、logo居中显示的效果，可通过调整元素定位与布局属性实现，具体修改如下：

1. 调整导航栏（header）定位 #

将导航栏设置为绝对定位，使其脱离文档流，这样下方的背景图区块可以从页面顶部开始渲染，导航栏则悬浮在背景图上方：

header {
  padding: 40px 4%;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.623);
  /* 修改为绝对定位，固定在页面顶部 */
  position: absolute;
  top: 0;
  left: 0;
  width: 92%; /* 减去左右4%的padding，确保宽度铺满 */
  z-index: 10; /* 确保导航栏在背景图上方 */
}

2. 修改背景图区块（logo-site）布局 #

让背景图区块铺满视口高度，同时通过flex布局实现logo的垂直水平居中：

section.logo-site {
  /* 去掉固定padding，改用min-height确保区块高度足够 */
  min-height: 100vh;
  background-image: url(images/arte.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* 添加flex布局，让内部logo居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 给顶部留出导航栏高度，避免logo被遮挡 */
  padding-top: 80px;
}

修改后的完整代码 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.interface {
  max-width: 1280px;
  margin: 0 auto;
}

.flex {
  display: flex;
}

/* Header */
header {
  padding: 40px 4%;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.623);
  position: absolute;
  top: 0;
  left: 0;
  width: 92%;
  z-index: 10;
}

header>.interface {
  display: flex;
  align-items: center;
  justify-content: center;
}

header a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  display: inline-block;
  transition: .2s;
}

header a:hover {
  color: #68b04d;
  transform: scale(1.10);
}

header nav ul {
  list-style-type: none;
}

header nav ul li {
  display: inline-block;
  padding: 0px 40px;
}

header nav .menu-desktop {
  overflow: hidden;
}

/* LOGO SITE */
section.logo-site {
  min-height: 100vh;
  background-image: url(images/arte.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}

section.logo-site img {
  width: 500px;
}

HTML 代码 #

<header>
  <div class="interface">
    <nav class="menu-desktop">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Placeholder</a></li>
        <li><a href="">Placeholder</a></li>
        <li><a href="">Placeholder</a></li>
        <li><a href="">Placeholder</a></li>
        <li><a href="">Placeholder</a></li>
      </ul>
    </nav>
  </div>
  <!-- Interface -->
</header>

<main>
  <section class="logo-site">
    <div class="interface">
      <img src="images/logo.png">
    </div>
  </section>
  <!-- Sessão logo -->
</main>

核心原理 #

• 绝对定位的导航栏脱离文档流，不再占据页面空间，背景图区块可从顶部开始渲染。
• z-index:10 保证导航栏始终在背景图上方，避免被遮挡。
• min-height:100vh 让背景图区块至少铺满视口高度，flex布局实现logo的垂直水平居中。
• padding-top 避免logo被导航栏遮挡。

内容的提问来源于stack exchange，提问作者Marcos Castro