带有 RGBA() 的 CSS3 径向渐变 [英] 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

网站网址:--snipped--

目前我正在使用以下 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 中制作这种径向背景，最初我使用与标题相同的代码，但使用 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，我想减少它，因为它会显着影响性能！帮助将不胜感激.

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 nightly 现在支持椭圆渐变 http://webkit.org/blog/1424/css3-gradients/，这些最终会进入 Safari 和 Chrome.通过 css 变换伪造椭圆径向渐变最终将是不必要的.

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-transform 压缩渐变并将其定位得更靠前一点:

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!

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

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