图像顶部的CSS文本

Question

我正试图在我的文本后面居中一个图像，最终将是链接。然而，这个文本显示在图像后面，我不知道为什么。我试过遵循多个教程，但似乎没有一个奏效。我试图显示的图像是一个红色的大球，它将位于多行屏幕上的大文本后面。

null

.content {
  text-align: center;
  position: relative;
}

.Centre-Circle {
  position: absolute;
  width: 20%;
  left: 40%;
  top: 30%;
}

.big-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 2vw;
  text-align: center;
  font-weight: bold;
}

.bigtext1:hover {
  text-decoration: line-through;
}

.bigtext2:hover {
  text-decoration: line-through;
}

.bigtext3:hover {
  text-decoration: line-through;
}

.bigtext4:hover {
  text-decoration: line-through;
}

.bigtext5:hover {
  text-decoration: line-through;
}

.bigtext6:hover {
  text-decoration: line-through;
}

<div class="content">
  <img src="images/Centre-Circle.png" alt="" class="Centre-Circle" />
  <div class="big-text">
    <h1 class="bigtext1">Brand Identity</h1>
    <h1 class="bigtext2">Digital Platforms</h1>
    <h1 class="bigtext3">eCommerce Experiences</h1>
    <h1 class="bigtext4">Performance Marketing</h1>
    <h1 class="bigtext5">Business Development</h1>
    <h1 class="bigtext6">Content Creation</h1>
  </div>
</div>

null

代码链接:https://codepen.io/minedude12/pen/qbrzagm

Answer 1

尝试将z-index：-1放在centre circle类上，使其移动到后层。