H1标签出现异常白色背景，如何实现图片上方渐变头部的透明文字背景

问题原因 #

你遇到的H1白色背景问题和未完成的JS脚本无关，是定位和层级设置错误导致的：

1. .img-gradient 设置为绝对定位后脱离了文档流，导致H1下层默认透出body的白色背景，看起来像H1自带白色背景
2. 缺少层级控制，文字、渐变层、图片的层级顺序错误
3. 全局img样式和WelcomeMenu内的图片样式存在冲突，同时WelcomeMenu没有设置相对定位作为内部绝对定位元素的参考容器

修复方案 #

第一步：修正HTML标签错误 #

将H1的错误闭合标签</H1>改为小写的</h1>，避免浏览器解析异常。

第二步：修改CSS样式 #

1. 给WelcomeMenu添加相对定位，作为内部元素的定位参考：

.WelcomeMenu {
  position: relative;
  height: 85vh;
}

2. 调整H1的定位和层级，显式设置背景透明：

.WelcomeMenu h1 {
  font-size: 50px;
  position: absolute;
  /* 可根据需求调整位置，以下是水平居中的写法 */
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #ffffff;
  background: transparent;
}

3. 调整渐变层和图片的层级，保证渐变盖在图片上，文字盖在渐变上：

.img-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 85vh;
  z-index: 2;
}

.WelcomeMenu img {
  width: 100%;
  height: 85vh;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover; /* 可选，避免图片拉伸变形 */
  z-index: 1;
}

4. 修复全局img样式冲突，你当前写的全局img样式会影响WelcomeMenu内的图片：

/* 原全局img样式，建议加父级选择器限制生效范围，比如仅作用于MiddleMenu内的图片 */
.MiddleMenu img {
  width: 600px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 50px;
}

修改完成后H1就会显示在带渐变的图片上方，没有白色背景。

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