html img 两图片重叠,html – 图像上的文本和背景颜色叠加

我正在尝试创建一个与图像大小完全匹配的纯色叠加层,并在该叠加层上显示文本.如果可能的话,我只想用

HTML和CSS来做这件事.

图像可以是任何大小,并且将被调整大小以适合其父容器中的中心.像这样的东西(不起作用)：

HTML：

Text will flow...

CSS：

.img-overlay img {

margin: 0 auto;

max-height: 100%;

}

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%

background-color: rgba(255,255,255,0.5);

}

我认为HTML5的< figure>标签可能在这里有所帮助,但在这方面没有取得多大成功.以下内容将标题宽度与图像宽度保持一致,但是当我尝试将其从文档流中移除并将其放置在图像上时,由于图像以边距为中心,因此它会结束到图像的左侧：0 auto; .

Text will flow...