带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不透明但是它创建了太多的噪音.

尝试了几个在线生成器以及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-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/