Html 如何沿图像底部放置文本？

如何将文本放置在图像上方，使其穿过图像底部

i、 e

我出现在图像的顶部，但沿底部对齐

我正在努力解决这个问题，看看我的意思，下面的网站有一个很好的例子。我以前在网站上看到过，下面是我的意思的一个示例快照：

您可以这样做： 我只添加了“wrap”div

.wrap{
最大宽度：300px；
}
氢{
位置：相对位置；
顶部：-78px；
不透明度：0.8；
背景：#22222；
颜色：#fff；
}

我出现在图像的顶部，但沿底部对齐

使用flexbox，您可以简单地执行以下操作：

.imageWrapper{
宽度：200px；
高度：300px；
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
边框：1px纯黑；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
背景大小：100%；
}
.textUpperImage{
宽度：100%；
高度：50px；
背景颜色：灰色；
z指数：200；
不透明度：0.5；
}

我在发短信

将图像包装在一个

内联块中，该块具有
位置：relative

用
bottom:0
和
width:100%
绝对定位
h2
，并且
h2
的高度将根据定位元素的内容自动调整


。我有一张照片{
显示：内联块；
位置：相对位置；
}
.我有一张图片{
显示：块；
}
.我有一张照片{
位置：绝对位置；
保证金：0；
底部：0；
左：0；
宽度：100%；
填充：1em；
背景：rgba（255,255,255,0.5）；
颜色：白色；
}

我出现在图像的顶部，但沿底部对齐

。我有一张照片{
位置：相对位置；
宽度：200px；
高度：200px；
}
氢{
位置：绝对位置；
底部：0px；
背景：rgba（0,0,0,0.5）；
颜色：#fff；
边际：0px；
}

我出现在图像的顶部，但沿底部对齐

.butFrame{
宽度：32%；
位置：相对位置；
光标：指针；
}
.butFrame.butHeading{
位置：绝对位置；
左：0；
右：0；
底部：0；
填充：10px0；
显示：块；
背景：rgba（0,0,0,0.5）；
保证金：0；
字体家族：继承；
字体大小：1.2米；
颜色：#fff；
文本对齐：居中；
文本转换：大写；
字体大小：400；
}

标题
带有标题和子标题的图像的另一种解决方案。（根据您给定的图像）

此处演示
。我有一张照片{
位置：相对位置；
背景图片：url(http://i.imgur.com/McIDx6g.jpg);
背景：url((http://i.imgur.com/McIDx6g.jpg)无重复中心；
高度：400px；
宽度：400px；
}
.title_wrap{
位置：绝对位置；
背景色：rgba（0,0,0,0.5）；
底部：0；
左：0；
右：0；
填充：15px；
颜色：#ffffff；
}
.title_wrap h2{
字体大小：20px；
保证金：0；
}
.title_wrap h6{
字体大小：12px；
保证金：0；
}

航向在这里
我出现在图像的顶部，但沿底部对齐
您可以这样做：
我只添加了“wrap”div

HTML:

我最近就是这样做的。它使用了新的html5标签figcaption

不管图像有多大，也不管你在figcaption里放了什么，它都应该工作


figure.overlay{
显示：内联块；
位置：相对位置；
保证金：0；
}
图1.2覆盖图{
位置：绝对位置；
背景：rgba（0,0,0,5）；
颜色：#fff；
底部：4px；
宽度：计算（100%-10px）；
填充物：5px；
}

“某种头！”
组成一个句子的单词！或者两个句子。



即使有了新的产品线
底部是一个带有低opacity@Paulie_D沿图像底部覆盖。@NitinDhomse是的。@Paulie\u D如果我能找到关于堆栈溢出的答案，我就不需要发布该问题。是否
top:-78px
强制某个高度，然后如果标题包含为两行，则会导致问题？我认为不是这里有一个解决方案，允许您使用
vertical align:bottom
，但我还没有解决这个问题。
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>

<div class="i_have_an_image">
  <div class="wrap">
    <img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
    <h2>I appear on top of the image, but aligned along the bottom</h2>
  </div>
</div>

    .wrap {
    max-width: 300px;
}
h2 {
    position: relative;
    top: -78px;
    opacity: 0.8;
    background: #222222;
    color:#fff;
}