CSS3 Radial Gradients mit RGBA()

Question

ich auf einer Website arbeite, die für einen Hintergrund mit Textur-Bild mehr css3 Gradienten als Overlay verwendet gefliesten

Website url: --snipped--

derzeit für header ich bin mit folgenden 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;} 

hier headerBg.png ist eine halbtransparente Textur der Größe 5x5 Pixel, Anzeige für Körper ich brauche diesen Hintergrund zu erstellen:

Ich muss wissen, wie diese Art von radialen Hintergrund in CSS3 zu machen, zunächst hatte ich den gleichen Code wie Header, aber mit rgba() für Farbe, Einstellung Ende des Gradienten mit 0 Opazität, aber es erstellt zu viel Lärm.

versuchte einige Online-Generatoren sowie für CSS3 radialen Hintergrund, aber keiner von ihnen waren gut!

Dieses Bild, das ich benutze, nimmt 280kbs auf und ich möchte es reduzieren, da es die Leistung erheblich beeinflusst! Hilfe wäre willkommen.

Update:

hochladen psd, kann von http://ylspeaks.com/stackoverflow_css3.zip

und das Hinzufügen von Bounty

Answer 1

bearbeiten Januar 2011 heruntergeladen werden: Webkit jetzt elliptischen Steigungen http://webkit.org/blog/1424/css3-gradients/ unterstützt jede Nacht, werden diese finden schließlich ihren Weg in Safari und Chrome. Falsche elliptische Radialgradienten durch CSS-Transformationen werden schließlich unnötig sein.

---

Ihr Problem hat die schwierigsten Zwänge ich je erlebt habe, aber es ist eine interessante Herausforderung und es zeigt die Grenzen der einzelnen Browser Ansatz für eine radiale Hintergründe, ist also, warum ich auf den Versuch entschieden.

Erstens ist der rgba-Ansatz tot geboren, weil die Opazität einen Teil des Rauschens verbergen wird. Es ist besser, halbtransparenten Lärm auf der Oberseite des Gradienten anwenden, wodurch Sie die extra div auf demselben Bild mehr Hintergrund vermeiden können durch Anlegen:

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

Sie werden feststellen, die Farbeigenschaft am Ende der Erklärung, es sieht komisch, aber So deklarieren Sie Farben, wenn Sie mehrere Hintergründe anwenden.

Zweitens webkit nicht unterstützt elliptische Hintergründe, so um die Arbeit dazu ist die Steigung durch squishing -webkit transformations und es ein bisschen weiter nach oben zu positionieren:

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

Für geistige Gesundheit, das Richtige zu tun scheint, kreisförmige Hintergründe sowohl auf FF als auch auf webkit anzuwenden und sie dann zu transformieren. Die Transformation von Firefox unterstützt jedoch keine Skalierungsgradienten!Also wenden wir einen elliptischen Hintergrund an:

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

Aber, da Webkits Behälter gequetscht wird, ist Firefoxs Steigung größer! An diesem Punkt würden wir darüber nachdenken, verschiedene CSS-Regeln für die Höhe des Gradienten anzuwenden, aber da Firefox den Gradienten nicht skaliert, können wir die gleiche Transformation auf den elliptischen Hintergrund anwenden, um die Container auf die gleiche Höhe zu bringen:

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

Und voila! Wir haben einen elliptischen Gradienten mit Rauschen, der sowohl auf Safari als auch auf Firefox funktioniert!

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

Answer 2

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));