全屏背景图后页面内容无法显示的Web开发问题求助

自学Web开发时，创建了带全屏背景图的导航栏，但后续添加的区块文本无法显示——给区块设置高度和颜色有效，但文本不显示。注释掉背景图的object-fit或position属性后文本能正常显示，求解决办法。

问题根源是绝对定位的背景图层级高于后续内容，把文本完全盖住了。以下两种方案可快速修复：

方案1：给背景图设置更低层级（简单直接） #

给.bg-img添加z-index: -1，让它处于所有内容的下方，这样后续区块的文本就能正常显示：

.bg-img {
  height: 100vh;
  width: 100vw;
  filter: brightness(0.5);
  object-fit: cover; 
  position: absolute;
  z-index: -1; /* 添加这行代码 */
}

方案2：改用CSS背景图（更符合规范） #

直接把<img>标签替换为给容器（比如<body>）设置background-image，从根源避免层级冲突，还能简化结构：

修改后的HTML（移除<img>标签） #

<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Travel Buddies</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="#">Home</a>
                <a class="nav-link" href="#">Features</a>
                <a class="nav-link" href="#">Blog</a>
                <a class="nav-link" href="#">Photographs</a>
                <a class="nav-link" href="#">Testimonials</a>
            </div>
        </div>
    </div>
</nav>

<div class="features">
    <p>Travel Buddies Features</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus animi non, aliquid illum
        cupiditate, vel nisi mollitia autem, ad facere ipsa quas aspernatur excepturi. Velit accusamus nobiseos
        beatae
        cupiditate.</p>
</div>

修改后的CSS（给body设置背景图） #

* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;       
}   

ol, ul {
list-style: none;
}   

body {
  min-height: 100vh;
  background-image: url('./images/marcel-hoy-7lmgkNRfbiE-unsplash.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
}

.navbar {
padding-top: 30px;
position: relative;
z-index: 1; /* 确保导航栏在背景上方 */
}

.navbar-nav a {
font-weight: 400;
color: #fff;
font-size: 1.25em;
}

.navbar-brand {
font-size: 2em;
}

.features {
height: 500vh;
background-color: aqua;
position: relative;
z-index: 1; /* 确保区块在背景上方 */
} 

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