與RGBA（）CSS3徑向漸變

Question

我的工作，它使用多個CSS3漸變爲覆蓋與紋理圖像平鋪背景的網站上

網站網址：--snipped--

目前爲頭我用下面的CSS：

#header { 
background: #DBD6D3; 
height: 364px; 
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3); 
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF)); 
} 

#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;} 

這裏headerBg.png是尺寸5x5的像素，廣告的半透明質感身體，我需要創建此背景：

我需要知道如何讓這種徑向背景的CSS3，最初我曾使用相同的代碼，頭，但與RGBA（）的顏色，設置漸變的0結束透明度，但它創造了太多的噪音。

試過幾個網上的發電機以及對CSS3徑向背景，但他們都不是好！

此圖片我使用的是佔用280kbs，我想降低它，因爲它顯著的表現效果！幫助將不勝感激。

更新：

上傳PSD，可以從 http://ylspeaks.com/stackoverflow_css3.zip

並加入賞金

Answer 1

編輯2011年1月下載： WebKit每日現在支持橢圓漸變http://webkit.org/blog/1424/css3-gradients/，這些都將最終找到他們的方式進入Safari和Chrome。通過CSS變換來產生橢圓放射漸變最終不需要。

---

您的問題我一生中遇到的最困難的制約，但它是一個有趣的挑戰，它說明了徑向背景每個瀏覽器方法的侷限性，所以這就是爲什麼我決定嘗試。

首先，RGBA方法是死胎，因爲透明度是要隱藏一些噪音。這是更好地在梯度之上應用半透明的噪音，則可以通過在同一圖像上應用多個背景避免額外的div：

background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent; 

你可能會注意到，在聲明末尾的顏色屬性，它看起來奇怪，但這就是您應用多個背景時如何聲明顏色。

其次，WebKit的不支持橢圓背景，所以工作都是圍繞這進一步壓扁通過梯度-webkit-變換和定位有點起來：

-webkit-transform: scale(1, 0.7) translate(0, -350px); 

對於理智，正確的事要做的似乎是在FF和WebKit上應用循環背景，然後進行轉換。但是，Firefox的轉換不支持縮放漸變！所以我們應用一個橢圓背景：

background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent; 

但是，由於Webkit的容器被擠壓，Firefox的漸變更大！在這一點上，我們會考慮對梯度的高度應用不同的CSS規則，但由於Firefox不會縮放梯度，我們可以在橢圓形背景上應用相同的轉換，使容器具有相同的高度：

-moz-transform: scale(1, 0.7) translate(0, -250px); 

瞧！我們有一個有噪音的橢圓漸變，適用於Safari和Firefox！

http://duopixel.com/stackoverflow/gradient/

Answer 2

background: #702914; 
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914); 
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));