html - CSS 文本覆盖图像

Question

我想像这样在图像上放置文字:

.gallery-image {
  position: relative;
}
h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

<div class="gallery-image">
  <a href="#">
    <img src="image.jpg" width="280">
  </a>
  <h2><span>Text</span></h2>
</div>

但是我的文字在图片后面，我该怎么做才能解决这个问题？

Answer 1

无论如何，Snippet 对我有用:

• 给img一个z-index: 2;

• 和h2一个z-index: 3;