CSS3 径向渐变与 RGBA()

Question

我正在开发一个网站，该网站使用多个 css3 渐变作为铺有纹理图像

网站 url 平铺的背景的叠加层： --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 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的渐变更大！ Firefox 不缩放渐变，因此我们可以在椭圆形背景上应用相同的变换，使容器具有相同的高度：

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

此时，我们会考虑对渐变的高度应用不同的 css 规则，但由于 瞧！我们有一个带噪声的椭圆渐变，适用于 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));