Question

我试图将figcaption放在img的底部，以便它位于顶部＆＃39;图像透明，所以图像通过。

不幸的是，我无法使它们具有相同的宽度（不知道为什么）或将figcaption放在图像的顶部。如果我使用否定margin-top，则只会隐藏＆＃39;在图像下面。

我已经尝试了z-index以及我能想到的其他所有内容但到目前为止没有运气。这是我的代码：

＆＃13;

.floatImage {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  margin: 15px;
  margin-right: 0px;
  z-index: -1;
  width: 100%;
}

figure {
  width: 25%;
  float: right;
}

figcaption {
  background-color: rgba(79, 44, 16, 0.6);
  height: 1.2em;
  width: 100%;
  margin-top: -2.4em;
  float: right;
  text-align: center;
  color: white;
  z-index: 1;
  font-family: 'Open Sans', sans;
}

＆＃13;

<figure>
  <img class="floatImage" src="img.png">
  <figcaption>Placeholder caption</figcaption>
</figure>

＆＃13;

Answer 1

要使z-index生效，该元素必须具有非静态位置，例如relative或absolute。
从宽度一致性

floatImage

结果：

.floatImage {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  z-index: -1;
  position: relative;
  width: 100%;
}

figure {
  width: 25%;
  float: right;
}

figcaption {
  background-color: rgba(79, 44, 16, 0.6);
  height: 1.2em;
  width: 100%;
  margin-top: -2.4em;
  float: right;
  text-align: center;
  color: white;
  z-index: 1;
  font-family: 'Open Sans', sans;
}

<figure>
  <img class="floatImage" src="http://placehold.it/300x400">
  <figcaption>Placeholder caption</figcaption>
</figure>

jsFiddle：https://jsfiddle.net/hey1ppd2/

如何将figcaption放在图像上

1 个答案: