窗口缩放/跨设备时按钮偏移、图片移位问题求助

问题根源 #

1. 背景图移位：body未设置最小高度，背景图仅覆盖内容高度；缺少background-position属性，缩放时背景图无法保持居中对齐。
2. 按钮移出屏幕：按钮使用绝对定位但未指定相对定位的父容器，位置参考对象为视口而非body；left属性用固定负百分比，无法适配不同分辨率。

修复背景图移位 #

修改body的CSS，确保背景图铺满视口且缩放时居中：

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-image: url('wallpaper.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; /* 缩放时保持背景图居中 */
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh; /* 让body至少铺满视口高度 */
  position: relative; /* 为按钮提供定位参考容器 */
}

修复按钮适配问题 #

方案1：优化绝对定位（推荐） #

利用transform: translate实现基于元素自身的偏移，替代固定负百分比的left值：

#custom-button {
  background-color: transparent; 
  border: none;
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: 50%; /* 先让按钮水平居中 */
  transform: translate(-159%, -50%); /* 向左偏移自身宽度的159%，同时垂直居中 */
  animation: riseAnimationitch 2s ease-in-out;
}

#custom-button2 {
  background-color: transparent; 
  border: none;
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-133%, -50%); /* 对应原left:-33%的偏移效果 */
  animation: riseAnimationgit 2s ease-in-out;
}

方案2：使用Flex布局（更易维护） #

通过容器的Flex布局管理按钮位置，彻底摆脱绝对定位的适配问题：

1. 添加按钮容器的CSS：

.button-container {
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  display: flex;
  gap: 24px; /* 按钮间的间距 */
  justify-content: center; /* 可根据需求调整对齐方式 */
}

2. 简化按钮样式：

#custom-button, #custom-button2 {
  background-color: transparent; 
  border: none;
  cursor: pointer;
}

#custom-button {
  animation: riseAnimationitch 2s ease-in-out;
}

#custom-button2 {
  animation: riseAnimationgit 2s ease-in-out;
}

3. 调整HTML结构：

<div class="button-container">
  <button id="custom-button">按钮1</button>
  <button id="custom-button2">按钮2</button>
</div>

核心思路 #

• 给body设置position: relative，让按钮的绝对定位参考body容器而非视口
• 用transform: translate替代固定百分比的left，实现自适应偏移
• 背景图添加background-position: center和min-height: 100vh，确保缩放时无移位且铺满屏幕

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