html - 将 figcaption 对齐到图中图像的底部

Question

<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

我正在创建一个 CSS 文件，并希望在图像顶部放置 100% 宽度和半透明背景颜色的 figcaption，但我希望 figcaption 框的底部和图像的底部始终是无论使用什么图像都一样。

Answer 1

在 figcaption 元素上使用绝对定位。不要忘记在图形元素上设置“位置：相对”。这是一个例子：http: //jsfiddle.net/armordecai/xL1bk6k7/

figure {
     position: relative;
}
figure img {
    display: block;
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 2

也可以使用 Flexbox 的方式。

figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}

img {
  max-width: 100%;
}

figcaption {
  align-self: flex-end;
  text-align: right;
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: #777;
  padding-right: 35px;
  /*adjust this to control how far it should be from egde*/
}

<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Apple_cake_with_vanilla_ice_cream_2.jpg/800px-Apple_cake_with_vanilla_ice_cream_2.jpg" alt="wikimedia-commons_apple-cake"> <br>
  <figcaption>
    Apple cake with vanilla ice cream
  </figcaption>
</figure>

Answer 3

如果您喜欢更微妙的标题，请尝试使用mix-blend-modeCSS 属性：

figure {
  position: relative;
}
figure figcaption {
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: right;
  padding: 15px;
  font-style: oblique;
  font-size: smaller;
  mix-blend-mode: soft-light;
}

<figure>
  <img alt="figure" src="https://images.unsplash.com/photo-1498084393753-b411b2d26b34?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;h=180&w=540&amp;q=30">
  <figcaption>
    <b>Ottawa road in the evening.</b>
    Photo by Marc-Olivier Jodoin on Unsplash
  </figcaption>
</figure>

结合brightness()以增加文本亮度。