html - 在图像上放置文本

Question

我用 HTML 构建了一个简单的倒数计时器，现在我希望将所有文本放在图像之上。所以图片在背景中，文字在上面。

这是 mac 屏幕的图像，如果有意义的话，我希望文本位于屏幕内部 :)

代码:

.time-to {
  text-align: center;
  font-family: Bangers;
  color: white;
  font-size: 35px;
  letter-spacing: 2px;
}

.time-to span {
  display: block;
  font-size: 80px;
  color: #D9D900;
}

.macPic {
  position: absolute;
}

<div class="macPic" class="">
  <img src="Images/mac.png" class="img-responsive" alt="Responsive image">
  <div class='time-to'>
    Slutar Midnatt Söndag :
    <span countdown='' date='December 3, 2017 12:00:00'>&nbsp;</span>
  </div>
</div>

Answer 1

.time-to {
  text-align: center;
  font-family: Bangers;
  color: white;
  font-size: 35px;
  letter-spacing: 2px;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.time-to span {
  display: block;
  font-size: 80px;
  color: #D9D900;
}

.macPic {
  position: absolute;
}

<div class="macPic" class="">
  <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
  <div class="centered">
    Slutar Midnatt Söndag :
    <span countdown='' date='December 3, 2017 12:00:00'>&nbsp;</span>
  </div>
</div>