不同浏览器尺寸下图片文本固定于线条上方的布局适配问题

我明白你遇到的问题了——用固定像素值设置top定位文本，虽然在某个特定浏览器宽度下能对齐图片上的线条，但一旦窗口缩放，图片会等比例拉伸/缩小，固定的top值就再也对应不上原来的位置了。

下面给你两种可靠的解决方案，能让文本在任何浏览器尺寸下都稳稳地停在指定线条上方：

方法1：用容器包裹图片+百分比定位 #

这种方法通过给图片和文本加一个相对定位的容器，让文本的位置基于容器（也就是图片的父元素）的高度按百分比计算，图片缩放时，文本位置会自动按比例调整。

调整后的HTML结构 #

<div class="image-wrapper">
  <img id="background_pic" src="你的背景图地址" alt="背景图">
  <div id="text">需要定位的文本内容</div>
</div>

对应的CSS代码 #

html, body {
  margin: 0;
  padding: 0;
}
.image-wrapper {
  position: relative; /* 作为文本绝对定位的参考容器 */
  width: 100%; /* 和图片宽度保持一致 */
}
#background_pic {
  width: 100%;
  display: block; /* 消除图片默认的底部空隙 */
}
#text {
  position: absolute;
  top: 70%; /* 这里的百分比需要你根据实际线条位置调整，比如原685px对应图片原始高度的70%就设70% */
  left: 50%; /* 可选：让文本水平居中 */
  transform: translateX(-50%); /* 配合left:50%实现精准水平居中 */
  /* 可添加其他样式：比如颜色、字体大小等 */
  color: #fff;
  font-size: 18px;
}

方法2：将图片设为容器背景（更精准的宽高比控制） #

如果你的背景图有固定的宽高比，这种方法会更稳定——通过padding-top维持容器的宽高比，让容器始终匹配图片的比例，再在容器内定位文本。

调整后的HTML结构 #

<div class="image-container">
  <div id="text">需要定位的文本内容</div>
</div>

对应的CSS代码 #

html, body {
  margin: 0;
  padding: 0;
}
.image-container {
  position: relative;
  width: 100%;
  /* 计算图片的宽高比：比如图片宽是1920，高是1080，那比例就是1080/1920=0.5625，即56.25% */
  padding-top: 56.25%; /* 替换成你实际图片的宽高比百分比 */
  background-image: url('你的背景图地址');
  background-size: cover; /* 让背景图铺满容器 */
  background-position: center; /* 背景图居中显示 */
}
#text {
  position: absolute;
  top: 70%; /* 同样根据线条位置调整百分比 */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
}

核心原理 #

两种方法的核心都是放弃固定像素的top值，改用基于容器高度的百分比定位——当浏览器宽度变化时，容器（或图片）的高度会按比例缩放，文本的top百分比会自动跟随调整，从而始终保持在图片指定线条的上方。

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