带文字的透明 div 图像答案

【问题标题】：Transparent div with text on image带文字的透明 div 图像
【发布时间】：2018-12-02 11:48:32
【问题描述】：

我想完成下面的效果。 (link)

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

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

【问题讨论】：

将 span 或 p 定位在图像的中心，并提供一些 z-index 来显示您完成的文本
那是未压缩的 PNG 图像吗？加载需要很长时间。

标签： html css styles opacity

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：