如何让图片始终固定在响应式背景图的指定位置？

核心思路是基于背景图中飓风眼的相对比例，用绝对定位+视口单位（vw/vh）+transform精准定位苹果图，彻底解决margin百分比带来的错位问题。

步骤1：确定飓风眼在原始背景图中的比例坐标 #

先找到飓风眼在原始背景图里的精确位置：

• 假设原始背景图宽度为W像素，高度为H像素
• 飓风眼的横坐标为X像素，纵坐标为Y像素
  计算比例：X/W（x轴占比）、Y/H（y轴占比），比如算出是70%（x）和50%（y）。

步骤2：实现代码 #

HTML结构

<div class="hurricane-container">
  <img src="apple.png" alt="覆盖飓风眼的苹果" class="apple-overlay">
</div>

CSS样式

.hurricane-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 背景图按cover缩放，用百分比定位匹配飓风眼的比例 */
  background: url('hurricane-bg.jpg') no-repeat 70% center;
  background-size: cover;
}

.apple-overlay {
  position: absolute;
  /* 用视口单位对应飓风眼的x/y比例 */
  left: 70vw;
  top: 50vh;
  /* 让苹果图的中心对准定位点（而非左上角） */
  transform: translate(-50%, -50%);
  /* 响应式缩放：vw保证随窗口等比例变化，max-width限制最大尺寸 */
  width: 5vw;
  max-width: 80px;
  height: auto;
}

方案生效原因 #

1. 视口单位匹配背景缩放逻辑：vw/vh直接基于浏览器视口的宽高百分比计算位置，和background-size: cover的缩放逻辑完全对齐——背景图始终按最小边铺满视口，飓风眼的相对视口位置固定为你算出的比例。
2. transform消除定位偏移：translate(-50%, -50%)让苹果图的中心精准对准定位点，避免了用margin/padding时因元素自身尺寸导致的偏移。
3. 响应式尺寸可控：用vw设置宽度，苹果图随视口等比例缩放；max-width可以防止窗口过大时苹果图尺寸失控。

调整技巧 #

• 如果飓风眼上下位置不是居中，把background-position的第二个值改成对应百分比（比如70% 45%），同时把top的值改成45vh。
• 若不需要苹果图随窗口缩放，把width改成固定像素值（比如60px），定位逻辑依然有效。

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