html - 在图像上进行分度，没有绝对定位

我对此感到困惑...我的目标是此页面：



我想在图像上放置文本，例如“ STALDEN”。我知道该怎么做，但是当我使用绝对定位并插入一个新条目时，文本与以前一样处于相同位置。我该如何更好地解决呢？

任何帮助，不胜感激！

这就是我所拥有的：

<div class="karte">
      <img src="img/home/stalden.png" alt="">
      <h1>STALDEN</h1>
    </div>

的CSS

.karte img {
  width: 100vw;
}


.karte h1 {
  position: absolute;
  top: 50px;
  left: 50px;
  color: white;
  font-family: "Teko", sans-serif;
  font-size: 15vw;
}

最佳答案

您可以将图像用作您的板块的背景

.karte {
  background: url('img/home/stalden.png');
}

<div class="karte">
  <h1>STALDEN</h1>
</div>