将 figcaption 对齐到图中图像的底部答案

【问题标题】：Align figcaption to bottom of image in figure将 figcaption 对齐到图中图像的底部
【发布时间】：2020-10-31 22:51:09
【问题描述】：

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

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

【问题讨论】：

您面临的问题是什么？ jsfiddle.net/PegtH
jsfiddle.net/herrshuster/F9q2f 是我现在拥有的，但它是用幻数破解的。

标签： html css layout

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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()结合，增加文字亮度。

【讨论】：