html - 带文字的透明 div 图像

Question

我想完成以下效果。（链接）

这个想法是我想在图像顶部有一个透明的 div，在这个 div 中我想放置一个不透明度的文本：1（不透明）

到目前为止，我设法使 div 透明，但其中的所有文本也是透明的，我不希望这样。

Answer 1

这应该可以帮助你。

HTML：

<div class="image">
    <img src="images/anyimg.jpg" alt="" />
    <h2>Image text:<br />Image Text</h2>
</div>

CSS：

.image {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}
h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
}
h2 span {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}
h2 span.spacer {
    padding: 0 2px;
    background: none;
}

Answer 2

.image
{
  position: absolute;
  top:200px;
  left:200px;
  z-index: -1;
  height:200px;
  width:200px;
  opacity:.5;

}
.text
{
  position: absolute;
  top:50px;
  left:50px;
  z-index: 1000;
  opacity:1;
}
<div>
<img src="image.jpg" class="imgage" />
<span class="text">Hello</span>
</div>