我正在尝试为我的 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>
}
最佳答案
如果背景图像本身不是半透明的,则不能将其设为半透明。 降低元素的不透明度会对其子元素起到同样的作用,这是合乎逻辑的,但一开始可能会令人沮丧。
例如试试这个:
<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>
关于css - View 中带有非透明文本的透明背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26939726/