css - View 中带有非透明文本的透明背景图像

Question

我正在尝试为我的 mvc 应用程序生成一个外观，该应用程序具有来 self 的模型的属性作为透明背景图像，然后标题和描述作为图像上的文本，但我希望 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>

}

Answer 1

如果背景图像本身不是半透明的，则不能将其设为半透明。降低元素的不透明度会对其子元素起到同样的作用，这是合乎逻辑的，但一开始可能会令人沮丧。

例如试试这个:

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