CSS中background-image无法显示背景图，如何修改使其正常显示？

问题场景 #

尝试给网站添加背景图但无法正常显示，测试用代码如下：

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div class="nav">
        <h4 class="nav-text">USER</h4>
    </div>
</body>
</html>

CSS 代码 #

body {
    background-color:black;
    background-image: url("background.png")
}

.nav {
    background-color: black;
    opacity: 50%;
    height: 45px;
}

.nav-text {
    opacity: 100%;
    color: white;
    float: right;
    margin-right: 25px;
    margin-top: 12px;
}

具体修复步骤 #

• 校验图片路径：确认background.png与HTML、CSS文件处于同一目录。若图片存放在子文件夹（如images/background.png），需修改URL为对应相对路径；若是网络图片，要填写完整的HTTP/HTTPS链接。
• 优化背景图显示属性：默认设置下背景图可能因尺寸、重复规则导致显示异常，给body补充以下CSS属性：

  body {
      background-color: black;
      background-image: url("background.png");
      background-repeat: no-repeat;
      background-size: cover; /* 让图片覆盖整个视口 */
      min-height: 100vh; /* 确保body高度至少铺满屏幕 */
  }
  

• 修正导航栏半透明继承问题：.nav的opacity: 50%会让子元素.nav-text也继承半透明效果，单独设置opacity: 100%无效。要实现导航栏背景半透明但文字不透明，修改.nav样式：

  .nav {
      background-color: rgba(0, 0, 0, 0.5); /* 使用rgba设置半透明背景，不影响子元素 */
      height: 45px;
  }
  

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