Css 视图中包含非透明文本的透明背景图像

我试图为我的mvc应用程序生成一个外观，该应用程序将模型中的属性作为透明的背景图像，然后将标题和描述作为图像上的文本，但我希望div的子对象不是透明的。我浏览了互联网，看到了一些不同的方法，比如将背景rgba更改为某个值，但我似乎无法让它工作。任何帮助都将不胜感激。谢谢

这是我的密码

      @foreach (var item in Model)
  { 

<div style="height: 250px; background-size: cover; opacity: .5; border-bottom: 3px solid #e3c340; background-image:url(@item.Image);background-size: 100% 100%;  " class=" hidden-md hidden-lg img-responsive">
    <div class="row" style="  background:rgba(56,255,255,0.1);;">
        <h1 style="font-weight:bold;" >@item.Name </h1>
    </div>





</div>

}

---

如果背景图像本身不是半透明的，则无法将其设置为半透明。 降低一个元素的不透明度对它的子元素也会有同样的效果，这是很合乎逻辑的，但一开始可能会令人沮丧

请尝试以下示例：

<div style="background-color: rgba(255, 0, 0, 0.5);">
  <p>I am perfectly opaque!</p>
</div>

这里我们将背景色设置为半透明

如果要对图像执行此操作，需要将其放置在自己的图层上，如下所示：

<div style="position relative;">
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/some/path/image.jpg); background-size: cover; opacity: 0.5;"></div>
  <p>I'm still opaque!</p>
</div>