使用 CSS 在图像上重叠文本

Question

我有一个图像，我想将底部的一段文本与透明的黑色背景重叠。

实现这一目标的最简单方法是什么，

<img src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" alt=""> 
<div>  
    <p class="description_content">example</p>  
</div>  

Answer 1

将img和 标签p包裹在 that 中，然后根据需要div应用属性和样式。position

例如这样的事情......

超文本标记语言

<div>
    <img src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" alt="" />
    <p class="description_content">example</p>
</div>

CSS

div {
    position: relative;
    width: 460px;
    height: 230px;
}
img, p {
    position: absolute;
    width: 100%;
}
p {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    color: #fff;
    margin: 0;
}

结果

jsfiddle 示例： http://jsfiddle.net/n8k326g6/

这只是一个示例，因此您可以了解如何完成。^{（只有一种方式）}

编辑： 添加responsive示例

对于responsive解决方案，请从中删除width&并仅将属性赋予标签。heightdivposition:absolutep

CSS

div {
    position: relative;
}
img, p {
    width: 100%;
}
p {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    color: #fff;
    margin: 0;
}

结果

更新了 jsfiddle 示例： http://jsfiddle.net/n8k326g6/1/

再说一次，这只是一个例子，为您指明正确的方向......