使用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标记包裹在div中，然后根据需要应用position属性和样式。

例如这样......

HTML

<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;
}

RESULT

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

---

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

---

编辑： 已添加responsive示例

对于responsive解决方案，请移除width＆amp;来自height的{​​{1}}并将div属性仅提供给position:absolute代码。

CSS

p

RESULT

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

---

再说一遍，这只是一个指向正确方向的例子......

---

Answer 2

最简单的方法是将元素放在div中，并将其置于相对位置，并将每个元素置于绝对位置。

<强> HTML

<div class="content">
     <img src="http://assets3.parliament.uk/iv/mainlarge//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg">
     <div class="title">Example</div>
</div>

<强> CSS

.content {
    position: relative;
}

.content .title {
   position: absolute;
   bottom: 10px;
   left: 10px;
   background: blue;
   padding: 10px 10px;
   color: #fff;
  }

我在这里为你做了一个例子：http://jsfiddle.net/y7j42q1s/

Answer 3

将所有内容包裹在div中：

<div class="imageContainer">
    <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>  
</div>

设置以下样式：

.imageContainer{
    position: relative;
}
.imageContainer div{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    backgorund-color: black;
}
.imageContainer div p{
    color: white;
}

然后使内部div的背景透明。我建议制作一个1px的1px透明png文件，并将其作为div的背景图片。