与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));