Question

我正在尝试为我的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>

}

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>

透明背景图像与视图中的非透明文本

1 个答案: