如何让绑定在背景图指定区域的div在窗口缩放时不发生偏移

你遇到的偏移本质是定位基准不匹配导致的：background-size: cover的逻辑是保持背景图原始宽高比，缩放至完全覆盖视口，当窗口宽高比和背景图原始宽高比不一致时，背景图会自动裁切左右或者上下区域，且始终保持居中。而你给div设置的top:14%、left:6%是基于视口的百分比，和背景图实际显示区域的坐标基准没有绑定，自然会随着窗口缩放出现偏移。

方案1：新增对齐背景行为的定位容器（兼容性好，易维护） #

把背景图从html元素转移到单独的全屏容器中，让容器的缩放、对齐逻辑和background-size: cover完全一致，目标div作为该容器的子元素，直接用百分比定位即可完全跟随背景图位置。

代码示例 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 背景容器，和你之前设置的html背景行为完全一致 */
.bg-container {
  position: fixed;
  inset: 0;
  background: url(pics/main-bg2_1280.jpg) no-repeat center center / cover;
  /* 替换为你的背景图原始宽高比，比如原图1280*720就填16/9 */
  aspect-ratio: 16/9;
  max-width: 100vw;
  max-height: 100vh;
  /* 保持和背景图一致的居中逻辑 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* 你的目标div */
.thediv {
  height: 16%;
  width: 16%;
  position: absolute;
  /* 百分比基于背景容器尺寸，和你原来的视觉位置保持一致即可 */
  top: 14%;
  left: 6%;
}

HTML结构调整为：

<div class="bg-container">
  <div class="thediv">这里放你的动态文本</div>
</div>

方案2：CSS变量计算修正定位（无需修改HTML结构） #

如果不想新增DOM节点，可以通过CSS变量计算背景图的实际显示尺寸和偏移量，直接修正div的定位参数，需要提前填入你的背景图原始宽高。

代码示例 #

:root {
  --bg-origin-width: 1280; /* 替换为你的背景图实际宽度 */
  --bg-origin-height: 720; /* 替换为你的背景图实际高度 */
  /* 计算背景图cover模式下的缩放比例 */
  --bg-scale: max(100vw / var(--bg-origin-width), 100vh / var(--bg-origin-height));
  /* 计算背景图实际显示的宽高 */
  --bg-real-width: calc(var(--bg-origin-width) * var(--bg-scale));
  --bg-real-height: calc(var(--bg-origin-height) * var(--bg-scale));
  /* 计算背景图居中后的偏移量 */
  --bg-offset-x: calc((100vw - var(--bg-real-width)) / 2);
  --bg-offset-y: calc((100vh - var(--bg-real-height)) / 2);
}
.thediv {
  position: fixed;
  /* 计算div的实际定位和尺寸，完全匹配背景图的比例 */
  left: calc(var(--bg-offset-x) + 0.06 * var(--bg-real-width));
  top: calc(var(--bg-offset-y) + 0.14 * var(--bg-real-height));
  width: calc(0.16 * var(--bg-real-width));
  height: calc(0.16 * var(--bg-real-height));
}

两种方案都可以保证无论窗口尺寸、宽高比如何变化，div都会固定在背景图的对应位置，不会出现偏移。

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