在視圖中具有非透明文本的透明背景圖像

我試圖爲我的mvc應用程序尋找具有屬性的模型作爲透明背景圖像，然後將標題和描述作爲圖像上的文本，但我希望div的孩子不要透明。我瀏覽過互聯網，並看到了一些不同的方法來完成它，比如將背景RGB調整到某個特定的值，但我似乎無法讓它起作用。任何幫助將不勝感激。謝謝。在視圖中具有非透明文本的透明背景圖像

這裏是我的代碼

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

}

來源

2014-11-14 John

你不能使背景圖像是半透明的，如果它不是半透明本身。降低元素不透明度對於孩子來說也是一樣，這很合乎邏輯，但起初可能令人沮喪。

嘗試此例如：

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

來源

2014-11-14 22:17:28

在視圖中具有非透明文本的透明背景圖像

回答

相關問題