React场景下CSS实现文本相对Hero背景图固定位置适配多视口

• position: fixed的定位基准是浏览器视口，和.--Hero容器完全无关，自然没法和容器内的背景图保持相对位置。
• 你给.--Hero设置了background-size: contain+background-position: bottom，背景图会按自身比例缩放、始终完整贴在容器底部，要让内部文本和背景图位置绑定，必须让文本的定位基准绑定.--Hero容器，同时定位尺寸和容器缩放比例同步。

直接替换原有CSS即可：

.--Hero {
  width: 100%;
  height: 90vh;
  background-image: url("./images/homepage/manpass.svg");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  /* 新增：给父容器加相对定位，作为内部绝对定位元素的定位基准 */
  position: relative;
}

.--Hero-container-text {
  /* 替换fixed为absolute，定位基准改为父级.--Hero容器 */
  position: absolute;
  /* 百分比定位值可根据你的实际视觉效果微调 */
  left: 60%;
  top: 40%;
  padding: 0 60px;
  /* 用视口相对单位+clamp限制字号范围，保证文本大小随容器同步缩放，不会出现大小错位 */
  font-size: clamp(1rem, 2.1vw, 2.4rem);
  /* 可选：如果觉得定位锚点在文本左上角不好对齐，加这个把锚点移到文本自身中心附近，微调更方便 */
  transform: translate(-8%, -8%);
}

• 如果不同尺寸下位置有偏差，只需要微调left、top的百分比数值即可，不要用px这类固定单位做定位。
• 如果你希望Hero区域高度也随宽度按比例变化，可以把height: 90vh换成aspect-ratio: 16/9（比例值换成你背景图的实际宽高比），位置同步的精度会更高。

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