没有绝对定位的图像划分

Question

我坚持这个......我的目标是这个页面：

我想在图像上放置文字，例如＆＃34; STALDEN＆＃34;。我知道如何做到这一点，但是当我使用绝对定位并插入新条目时，文本与之前的文本位于同一位置。我怎样才能更好地解决这个问题？

任何帮助非常感谢！

这就是我所拥有的：

<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;
}

Answer 1

您可以使用图片作为部分的背景

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

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

Answer 2

试试这个：

.karte{
  position: relative;
}

.karte img{
 position: absolute;
 top: 0;
 left: 0;
}

.karte h1{
 position: absolute;
 top: 50px;
 left: 50px;
}

正是你问的。但是最好在这里使用background-image因为更好的语义和其他原因......只需使用background-image。这是更好的解决方案。