已放置div元素后如何设置网站背景图覆盖导航与首个div

问题原因与修复方案 #

• 第一个核心错误：你当前CSS中写的.body是类选择器，仅会匹配<div class="body">这类带body类名的元素，无法匹配页面根节点<body>，所以背景图根本没有生效。
• 第二个问题：你仅给.first-box设置了透明背景，没有给导航栏.navigation设置透明背景，即使body背景生效也会被导航栏的默认背景色遮挡。

修正后的CSS代码 #

/* 去掉body前的点，选择真实的页面body节点 */
body { 
  background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg"); 
  background-repeat: no-repeat; 
  background-size: cover;
  /* 新增：背景从顶部开始对齐，确保导航和首屏区块都能覆盖到背景 */
  background-position: center top;
  /* 新增：确保body高度撑满视口，避免背景图显示不全 */
  min-height: 100vh;
  margin: 0;
}
/* 给导航栏也设置透明背景 */
.navigation {
  background-color: transparent;
}
.first-box{
  grid-area: first-box;
  align-content: center;
  padding: 65px 300px;
  background-color: transparent;
}

额外排查项 #

如果修改后还是不生效，可以检查以下两点：

• 有没有其他全局样式给navigation强制设置了背景色，权重比你写的高，可加!important临时测试，或者调整选择器权重
• 检查html根节点是否设置了height: 100%，避免body高度无法撑开导致背景图显示异常

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