Question

我试图将文字放在像这样的图像上：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

无论如何，

Snippet正在为我工作：

授予img一个z-index: 2;
h2一个z-index: 3;

Answer 2

＆＃13;

.container {
  position: relative;
}
h2 {
  position: absolute;
  bottom: 10%;
  background: darkgray;
  padding: 1%;
  color: white;
}

＆＃13;

<div class="container">
  <img src="http://placekitten.com/g/200/300" alt="" />
  <h2>THIS text</h2>
</div>

＆＃13;

这样的东西？我只是设计了h2标签，无需使用您使用的span标签，并减少了标记。

Answer 3

我觉得这需要一些解释。

该示例正在运行，但如果它实际上不适用于OP，则他/她可以使用z-index，但只需在{{1}上调用z-index } tag不能用作demonstrated here。更改图片和img的{{1}}将无效。

z-index仅适用于定位元素。由于父元素为z-index，因此您可以在其中一个子元素上使用h2（或只是设置一个位置）。在这种情况下，position:relative包含在锚标记中：

position: inherit

因此，将img应用于<a href="#"> <img src="image.jpg" width="280"> </a>标记无论如何都没有意义。而是将其添加到z-index：

img

现在，如果您更改a和a{ position: inherit; z-index: 2; }的{{1}}值，您会看到具有较高z-index数字的元素出现：

EXAMPLE

CSS文本图像

3 个答案: