如何在图片上添加响应式文本且文本位置不随屏幕改变？

要解决文本随屏幕尺寸偏移的问题，核心是放弃固定像素定位，改用百分比或相对比例的定位方式，让文本位置始终和图片的特定区域绑定。下面是具体实现方案：

核心思路 #

把图片和文本放在同一个相对定位的容器里，让图片自适应容器宽度（保证响应式缩放），然后对文本使用绝对定位，用top/left的百分比值来指定相对于图片的位置，再通过transform微调对齐精度。这样不管图片怎么缩放，文本都会跟着对应区域走。

代码实现 #

<div class="image-container">
  <img src="your-element-image.jpg" alt="要素图片" class="responsive-image">
  <!-- 单价文本 -->
  <span class="price-text">¥99.9</span>
</div>

.image-container {
  position: relative;
  /* 容器宽度可根据需求调整，比如设为占满父容器 */
  width: 100%;
  max-width: 800px; /* 限制最大宽度，避免图片过大 */
  margin: 0 auto;
}

.responsive-image {
  width: 100%;
  height: auto; /* 保持图片比例 */
  display: block;
}

.price-text {
  position: absolute;
  /* 这里的百分比根据你图片中"单价"列的实际位置调整 */
  top: 20%; /* 距离图片顶部的比例 */
  left: 60%; /* 距离图片左侧的比例 */
  /* 让文本中心对准定位点，避免文本偏移 */
  transform: translate(-50%, -50%);
  /* 可选：美化文本样式 */
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff4400;
}

为什么之前的方法会偏移？ #

你之前用的固定像素值（比如top: 50px; left: 200px;）是基于当前屏幕下的图片尺寸设定的，当屏幕缩小/放大时，图片会按比例缩放，但像素定位不会跟着调整，自然就会偏离目标区域。而百分比定位是相对于容器（和图片同尺寸）的，会随图片缩放同步调整位置。

进阶微调（可选） #

如果某些极端屏幕下需要微调文本位置，可以用媒体查询针对特定宽度调整百分比：

@media (max-width: 480px) {
  .price-text {
    top: 22%;
    left: 58%;
    font-size: 1rem;
  }
}

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