为标题文本添加样式导致背景图片布局错乱的解决方法

你的问题出在Greetings使用绝对定位后脱离正常文档流，同时居中写法不完整，且元素结构分离导致布局逻辑混乱。以下是两种可行的修复方法：

方法一：调整DOM结构（推荐） #

将Greetings嵌套进Background容器内，利用Flex布局实现文字居中，让背景与文字属于同一容器，布局逻辑更清晰，避免错乱。

修改后的HTML：

<link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="Background">
    <div class="Greetings">
      <h1>
        The City Crown <br />
        One of a Kind Place
      </h1>
    </div>
  </div>
  <div class="Buttonmenu">
    <h1></h1>
  </div>
</body>

修改后的CSS：

* {
  padding: 0;
  margin: 0;
}
.Background {
  background: url(./Images/IndexBackground.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  /* 新增Flex布局，实现内部元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.Greetings {
  text-align: center;
  /* 移除多余的宽高和绝对定位 */
}

方法二：修正绝对定位样式（保留原结构） #

若不想调整DOM结构，需完善Greetings的绝对定位属性，确保它仅覆盖背景区域，不影响后续元素布局。

修改后的CSS：

* {
  padding: 0;
  margin: 0;
}
.Background {
  background: url(./Images/IndexBackground.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  /* 给背景容器添加相对定位，作为绝对定位元素的参考 */
  position: relative;
}
.Greetings {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 通过transform实现精准居中 */
  transform: translate(-50%, -50%);
  text-align: center;
  /* 移除多余的宽高设置 */
}

说明 #

• 方法一用Flex布局实现居中，代码简洁、布局稳定性更高；
• 方法二保留原DOM结构，通过position: relative为背景容器建立定位上下文，再用transform: translate完成精准居中，避免绝对定位引发的布局偏移。

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