CSS3線性漸變+ RGBA，沒那麼真正的透明

我有一個頁面設置，看起來與此類似：CSS3線性漸變+ RGBA，沒那麼真正的透明

<body> 
    <div id="wrapper"> 
     <!--- ... content ... --> 
    </div> 
</body>

身體有一個背景顏色和平鋪圖像，增加了一些噪音和糧食的背景。最重要的是#wrapper有一個線性漸變作爲從rgba（0,0,0，.3）到rgba（0,0,0,0）的背景，並且漸變擴展到了頂部的24個像素div，它位於頁面頂部---添加陰影。

我的問題是，即使漸變的最終顏色的alpha值爲零，#wrapper的背景在24像素漸變完成後保留的顏色也不是真正的透明度。這讓我無法理解，是#wrapper上的一個不真實的透明背景，在#wrapper停止的地方在body-background上留下了可見的「分割線」。

如何獲得漸變以完全透明？我猜想一個零值的alpha值會做到這一點。此外，使用transparent關鍵字也不能解決它。

更新

我已經添加了圖片顯示的問題。第一張照片是實際的外觀，第二張照片顯示了線條的位置，因爲它在那裏，儘管在第一張照片上很不清楚。

actual look enter image description here

正如你所看到的，漸變不進去真正的透明。不是當指定的顏色爲rgba(0,0,0,0)或transparent時。

克里斯 - 巴克霍爾茲

來源

2011-02-11 chrisbuchholz

，你能否告訴我們你的包裝的CSS代碼？這看起來很明顯，但是你給#wrapper添加了一個box-shadow嗎？ – Duopixel 2011-02-11 22:09:49

並且上傳正在發生的事情的截圖也非常方便。還有什麼瀏覽器/設備？ – 2011-02-11 22:58:04

你在WebKit的瀏覽器（Chrome/Safari），火狐，IE和Opera測試它？因爲它們都以不同的方式處理漸變。

我不完全理解，但我相信你應該考慮在線使用CSS漸變生成器，其中大多數使用純色，只需用新的RGBA（）替換十六進制小數。

這是學習如何出錯的最好方法。

其他則如果你已經在包裝div上定義了可能是問題的不透明度。

這是我所能做的

來源

2011-02-15 00:02:12 Glacius

-1

我有同樣的問題...並意識到這是因爲我的圖像保存JPG文件作爲最好的。你需要一些支持透明度的東西。

來源

2012-02-01 23:53:28 dee

您沒有提供CSS代碼。這將有助於更好地發現問題。但是可能的問題之一可能是CSS屬性的堆疊。

#wrapper { 
    background: rgb(174,188,191); 
    background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); 
}

Sample expected

#wrapper { 
    background: rgb(174,188,191); 
    background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); 
    background: #111; /*Overrides the above properties*/ 
}

你推翻了在具有較高優先級的CSS先用另一背景屬性，也許某處，導致您的透明度重寫：

Sample overriden

來源

2012-12-14 18:32:47 swan

CSS3線性漸變+ RGBA，沒那麼真正的透明

回答

相關問題