如何实现窗口缩放时button按钮固定依附于背景img图片

可以实现，你之前使用百分比定位未生效的核心原因是百分比的参照容器和图片的缩放参照不一致，只要把按钮和图片的定位参照绑定即可，具体实现方案如下：

实现原理 #

给每张图片和对应的按钮套一个独立的相对定位容器，所有定位都以这个容器为基准，容器缩放时图片和按钮会同步等比缩放，位置就能始终对应。

代码示例 #

HTML 结构改造 #

<body>
  <div class="scene-container">
    <!-- 单组图片+交互按钮容器，多组可重复该结构 -->
    <div class="img-interactive-group">
      <img src="你的背景图路径" alt="场景背景图">
      <button class="interactive-btn">交互按钮</button>
    </div>
    <!-- 额外的图片、按钮都按上面的结构分组，或者放在同一个group内 -->
  </div>
</body>

CSS 样式 #

/* 交互组容器，作为定位的参照基准 */
.img-interactive-group {
  position: relative;
  /* 按需设置容器宽度，比如设为和图片原始宽度一致避免放大模糊 */
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

/* 图片设置为自适应，和容器尺寸同步 */
.img-interactive-group img {
  display: block;
  width: 100%;
  height: auto;
}

/* 按钮绝对定位，百分比相对于交互组容器，和图片尺寸完全绑定 */
.interactive-btn {
  position: absolute;
  /* 示例值：对应图片宽度25%、高度40%的位置 */
  left: 25%;
  top: 40%;
  /* 可选：抵消按钮自身宽高的偏移，让按钮中心对准点位 */
  transform: translate(-50%, -50%);
}

注意事项 #

• 如果是多张背景图叠加使用，只需将所有图片都放在同一个img-interactive-group容器内即可，按钮定位逻辑不变
• 不要使用vw/vh作为按钮的定位单位，除非你能保证图片的缩放比例和视口完全同步，否则会出现错位
• 如果需要兼容不支持transform属性的旧浏览器，直接调整left/top的百分比值校准按钮位置即可，不影响核心功能

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