另一個具有漸變透明度的背景圖像

我查了很多關於這個主題的網站，發現隨機的東西沒有什麼固體。我已經檢查了一個問題已經在stackoverflow中回答，但它不是我正在尋找的東西。我已經改變了JSfilled的代碼中提到，並嘗試添加一個背景顏色到假設是透明http://jsfiddle.net/FVNY7/518/，但可悲的是，它不是一個像我想的東西，尋求另一個具有漸變透明度的背景圖像

<div class="content"></div> 
    <div class="FadeAway"></div> 


.content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; background-color:red;} 

.FadeAway{ 
     position: absolute; top:0px; left:0px; width:100%; height:100%; 
     background:transparent; 
     background: linear-gradient(top, rgba(255, 255, 255, 255) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff); 

}

我想要的背景圖片與背景顏色混合（漸變從圖像的底部到頂部），換句話說，如果我的網站的背景改變顏色，透明漸變考慮到我的網站的背景顏色，我不想手動定義的顏色漸變開始的地方。希望你明白我的意思。我提供的jsfiddle的例子是我不想實現的。讓這張照片與背景融爲一體。我希望你能理解我的問題。

來源

2015-06-29 Lucian Al-Zafari

你可能需要JS來做到這一點。 CSS無法檢測到其他元素的背景顏色 –

您可能希望鏈接到您所看到的以及哪些不符合您的需求的問題，並說出該問題的答案未能如何滿足他們。因爲這個問題的標題和內容似乎與[此問題]不同（http://stackoverflow.com/q/2504071/215552）。 –

沒有JavaScript，我會建議使用半透明的PNG圖像。然後它會出現與背景混合。

或者，您可以將圖像放置在底層，並使用RGBa顏色作爲頂層的漸變色。

來源

2015-06-29 15:51:40 bboysupaman

另一個具有漸變透明度的背景圖像

回答

相關問題