15

我正在一个网站上工作，该网站使用多个 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下载

并增加赏金

4

2 回答 2

23

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/替代文字

于 2010-12-24T18:16:25.240 回答
0 
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));
于 2010-12-23T16:19:04.333 回答