如何在非全屏背景图特定区域精准定位动态文本？

这个需求完全可行，问题出在你用了固定像素值定位，且没把图片和文本放在正确的相对定位容器里。只要改用百分比定位+响应式图片，就能让文本在不同分辨率下都精准贴合图片的特定区域。

核心问题分析 #

固定像素（px）是绝对尺寸，当图片随屏幕分辨率缩放时，文本的固定位置不会跟着图片比例调整，自然会偏移。而百分比是相对于父容器的相对尺寸，能和图片缩放同步变化。

具体修改步骤 #

1. 修复HTML结构

必须把图片和文本容器放在同一个相对定位的父容器里，这样绝对定位的文本才会相对于图片（而非整个页面）定位：

<div class="custom-container">
  <img src="https://placekitten.com/368/560" alt="scorecard">
  <div class="rank"><p class="text-white display-6">#1</p></div>
  <div class="score"><p class="text-white display-6">135</p></div>
</div>

2. 修改CSS实现响应式定位

• 让父容器自适应图片宽度，设置相对定位
• 图片设为响应式，保持比例缩放
• 用百分比替换固定像素，百分比值通过「原固定像素 ÷ 图片原始尺寸」计算得出：

.custom-container {
  position: relative;
  display: inline-block; /* 容器宽度自适应图片，而非占满整行 */
  color: white;
}

.custom-container img {
  max-width: 100%;
  height: auto; /* 图片随容器宽度按比例缩放，避免变形 */
  display: block; /* 消除图片下方默认空白 */
}

.rank {
  position: absolute;
  /* 原bottom:90px，图片高度560px → 90/560≈16.07% */
  bottom: 16.07%;
  /* 原left:90px，图片宽度368px → 90/368≈24.46% */
  left: 24.46%;
}

.score {
  position: absolute;
  /* 原top:90px → 90/560≈16.07% */
  top: 16.07%;
  left: 24.46%;
}

3. （可选）更精准的文本对齐

如果需要让文本中心对齐图片的某个点，可以配合transform: translate调整：

.score {
  position: absolute;
  top: 16.07%;
  left: 24.46%;
  transform: translate(-50%, -50%); /* 让文本中心对齐定位点 */
}

效果说明 #

修改后，无论屏幕分辨率如何变化，图片都会按比例缩放，文本的百分比定位会同步跟随图片尺寸调整，始终保持在你想要的特定区域上方。

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