CSS3径向渐变RGBA()

前端之家收集整理的这篇文章主要介绍了CSS3径向渐变RGBA()前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在一个网站上使用多个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是一个半透明的大小为5×5像素的纹理,广告为身体我需要创建这样的背景:

我需要知道如何在CSS3中制作这种径向背景,最初我使用了与标题相同的代码,但是使用rgba()作为颜色,将渐变的结束设置为0,不透明度,但是它产生了太多的噪点.

尝试了很少的在线发电机以及CSS3径向背景,但没有一个是好的!

我使用的这个图像占用了280kbs,我想减少它,因为它显着影响了性能!帮助将不胜感激

更新:

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

增加赏金

解决方法

编辑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,700,100,from(#6f2813),to(#B9513D))  transparent;

您可能会注意到声明结束时的颜色属性,它看起来很奇怪,但是当您应用多个背景时,您如何声明颜色.

其次,webkit不支持椭圆形背景,所以在这方面的工作是通过-webkit转换来压缩渐变,并将其定位更深入:

-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,-250px);

和瞧!我们有一个具有噪音的椭圆渐变,可以在Safari和Firefox上运行!

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

原文链接:https://www.f2er.com/css/217116.html

猜你在找的CSS相关文章