如何使英雄图像内的文本响应？

Question

我正在尝试使用 Bootstrap 构建一个响应式网站，这对我来说是全新的。我想制作一个英雄图像，其中的文本位于中间。当我的背景图像调整大小时，我的文本只是保持在同一位置，并且不会调整到较小的视口。所以我最终得到这样的结果：

这是我尝试过的： HTML：

    <header class="header-container">
        <!-- background img -->
        <div class="bg-image d-flex justify-content-center align-items-center">
            <div class="text-center">
                <h1 class="h1-hero h-font">where great ideas come to life</h1>
                <p class="p-hero text-font">Passionate creative studio helping startups grow their
                    business!
                </p>

            </div>
        </div>
    </header>

CSS：

.header-container {
    padding: 48px 50px 0px;
    max-width: 100%;
}

.bg-image {
    background-image: url('../img/hero.png');
    background-size: 100%;
    height: 100vh;
    background-repeat: no-repeat;
}

.h1-hero {
    font-size: var(--font-size-h1);
    font-weight: 500;
    line-height: 106px;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: white;
}

.p-hero {
    font-family: var(--font-family-text);
    font-size: 20px;
    color: white;
    opacity: 80%;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: 1.3px;
    padding-top: 12px;
}

Answer 1

您是否知道自己想要的结果是什么？目前，下面只是您添加到问题中的内容的复制和粘贴，但一旦您添加了您想要实现的特定结果，我将更新我的答案。 （还添加了在线图像，以便可以清楚地显示片段）

.header-container {
  padding: 48px 50px 0px;
  max-width: 100%;
}

.bg-image {
  background-image: url('https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg');
  background-size: 100%;
  height: 100vh;
  background-repeat: no-repeat;
}

.h1-hero {
  font-size: var(--font-size-h1);
  font-weight: 500;
  line-height: 106px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: white;
}

.p-hero {
  font-family: var(--font-family-text);
  font-size: 20px;
  color: white;
  opacity: 80%;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: 1.3px;
  padding-top: 12px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<header class="header-container">
  <!-- background img -->
  <div class="bg-image d-flex justify-content-center align-items-center">
    <div class="text-center">
      <h1 class="h1-hero h-font">where great ideas come to life</h1>
      <p class="p-hero text-font">Passionate creative studio helping startups grow their business!
      </p>

    </div>
  </div>
</header>