带 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 像素的半透明纹理，作为 body 的广告我需要创建这个背景:

我需要知道如何在 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 的渐变更大!在这一点上，我们会考虑对渐变的高度应用不同的 css 规则，但由于 Firefox 不缩放渐变，我们可以在椭圆背景上应用相同的变换，使容器具有相同的高度:

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

瞧!我们有一个带有噪声的椭圆渐变，它适用于 Safari 和 Firefox!

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