如何让元素相对于背景图特定对象定位并保持响应式？

这个问题的核心是你用了错误的定位方式，加上对CSS百分比单位的理解偏差，导致缩放时元素位置跑偏。咱们一步步来解决：

为什么原来的代码会失效？ #

你之前用了 margin: 28% 0 0 54% 来定位元素，但你可能不知道：CSS中margin和padding的百分比值，不管是上下还是左右，都是基于父元素的宽度计算的。也就是说，margin-top:28% 不是容器高度的28%，而是容器宽度的28%！这就导致屏幕宽高比变化时，元素的垂直位置会跟着宽度缩放，而背景图里的logo是按自身宽高比缩放的，两者必然错位。

另外，你的容器没有设置宽高，默认是内容高度，也会影响定位的参考基准。

修正方案 #

方案1：直接修改现有背景图代码 #

只需要调整定位方式，确保元素的位置基于容器的宽高比例，同时让容器占满视口：

/* 先确保html和body占满视口，无内外边距 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免滚动条干扰 */
}

body {
  background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
  background-size: cover;
  background-position: center center; /* 保持背景图居中，和cover配合更稳定 */
  background-repeat: no-repeat;
}

.container{
  position: relative;
  width: 100%;
  height: 100%; /* 让容器占满视口，作为定位基准 */
}

.fixed-title{
  position: absolute;
  top: 28%; /* 基于容器高度的百分比，对应logo在原图中的垂直位置比例 */
  left: 54%; /* 基于容器宽度的百分比，对应logo在原图中的水平位置比例 */
  margin: 0; /* 移除margin，避免干扰定位 */
}

HTML保持不变：

<div class="container">
 <h1 class="fixed-title">Apple</h1>
</div>

方案2：用img标签替代背景图（更直观） #

如果担心background-size:cover的浏览器兼容性，或者需要更直观地控制图片，也可以用img标签配合object-fit:cover实现和背景图一样的效果，定位逻辑完全一致：

<div class="container">
  <img src="http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg" alt="背景图" class="bg-img">
  <h1 class="fixed-title">Apple</h1>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 和background-size:cover行为完全一致 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 把图片放到文字后面，模拟背景效果 */
}

.fixed-title{
  position: absolute;
  top: 28%;
  left: 54%;
  margin: 0;
}

精准定位小技巧 #

如果需要和logo完全对齐，可以用截图工具（比如PS、Snipaste）测量：

1. 原始背景图的总宽度W和总高度H
2. logo顶部距离图片顶部的像素值Y，左侧距离图片左侧的像素值X
3. 计算比例：top: (Y/H)*100%，left: (X/W)*100%
   用这个比例设置top和left，就能实现像素级的精准对齐，且缩放时绝对不会错位。

内容的提问来源于stack exchange，提问作者Tiago Conceição