带RGBA的CSS3径向渐变（）

Question

我正在开发一个网站，该网站使用多个css3渐变作为覆盖纹理图像的背景

网站网址： - 剪切 -

目前我正在使用以下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不透明但是它产生了太多的噪音。 / p>

尝试了几个在线生成器以及CSS3径向背景，但没有一个是好的！

我使用的这张图片占用了280kbs，我希望减少它，因为它会显着影响性能！帮助将不胜感激。

更新

上传psd，可以从中下载 http://ylspeaks.com/stackoverflow_css3.zip

并添加赏金

Answer 1

编辑2011年1月： Webkit nightly现在支持椭圆渐变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-transform压缩渐变并将其进一步定位：

-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不会缩放渐变，我们可以在椭圆背景上应用相同的转换，使容器具有相同的高度： / p>

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