CSS3径向渐变与RGBA（） [英] CSS3 Radial Gradients with RGBA()

问题描述

我的工作，它使用多个CSS3渐变叠加作为与纹理图像平铺背景的网站

I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image

网站网址： - 剪断 - 的

目前的头，我使用下面的CSS：

currently for header i am using following 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的像素，广告身体，我需要创造这样的背景半透明质地：

here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:

我需要知道如何使这种在CSS3径向背景下，最初我曾用同样的code作为标题，但与RGBA（）颜色，设置为0不透明渐变的结束，但它创造了太多噪音。

I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.

尝试一些在线生成以及对CSS3径向背景，但他们都不是好！

tried few online generators as well for CSS3 radial background but none of them were good!

这形象我现在用的就是占用280kbs，我想降低它，因为它显著的表现效果！帮助将AP preciated。

This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.

更新：

上传PSD，能下载
http://ylspeaks.com/stackoverflow_css3.zip

和增加赏金

推荐答案

修改2011年1月：
WebKit每日现在支持椭圆渐变 http://webkit.org/blog/1424/css3-gradients/ ，这些最终会找到自己的方式进入Safari和Chrome。通过CSS变换伪造椭圆径向渐变最终将unnecesary。

Edit Jan 2011: Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.

您的问题我一生中遇到的最困难的限制，但它是一个有趣的挑战，它显示了每个浏览器的限制，接近径向背景，所以这就是为什么我决定尝试。

Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.

首先，RGBA方法是死胎，因为透明度是要隐藏一些噪音。这是更好地在梯度上应用半透明的噪音，你可以通过应用同一图像上的多个背景避免额外的div：

First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:

background: url(noise.png)  repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D))  transparent;

您可能会注意到在声明末尾的颜色属性，它看起来奇怪，但这个你怎么申报的颜色，当你应用多个背景。

You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.

二，WebKit的不支持椭圆背景，所以工作要围绕这是压扁通过梯度-webkit-变换，并进一步将其定位有点激动：

Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:

-webkit-transform: scale(1, 0.7) translate(0, -350px);

有关理智，做正确的事情似乎在运用上都FF圆形背景和WebKit，然后改造他们。不过，Firefox的变换不支持缩放渐变！所以，我们采用一个椭圆形的背景：

For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:

background: url(noise.png)  repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;

不过，由于WebKit的容器压扁，Firefox的坡度比较大！在这一点上，我们会考虑渐变的高度应用不同的CSS规则，但由于Firefox不缩放梯度，我们可以应用在椭圆背景相同的改造获得的容器是相同的高度：

But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:

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

和瞧！我们有一个椭圆形的梯度噪声，上Safari和Firefox的作​​品！

And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!

<一个href=\"http://duopixel.com/stackoverflow/gradient/\">http://duopixel.com/stackoverflow/gradient/

这篇关于CSS3径向渐变与RGBA（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！