网站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
并增加赏金
解决方法
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上运行！
原文地址：https://www.jb51.cc/css/217116.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
