RGBa Browser Support

RGBa ist eine Möglichkeit, eine Farbe in CSS zu deklarieren, die Alpha-Transparenz unterstützt. Sie sieht so aus:

div {
   background: rgba(200, 54, 54, 0.5); 
}

Dies ermöglicht es uns, Bereiche mit transparenter Farbe zu füllen. Die ersten drei Zahlen repräsentieren die Farbe in RGB-Werten und die vierte eine Transparenz von 0 bis 1 (null ist vollständig transparent und eins ist vollständig opak). Wir haben schon lange dieopacityEigenschaft, die ähnlich ist, aberopacityalle untergeordneten Elemente dazu zwingt, ebenfalls transparent zu werden, und es gibt keine Möglichkeit, dies zu verhindern (außer seltsamen Positions-Hacks). Browserübergreifende Opazität ist ebenfalls etwas unsauber.

Mit RGBa können wir eine Box transparent machen und ihre untergeordneten Elemente unverändert lassen.

Deklarieren einer Fallback-Farbe

Nicht alle Browser unterstützen RGBa, daher sollten Sie, wenn das Design es zulässt, eine „Fallback“-Farbe deklarieren. Diese Farbe wird höchstwahrscheinlich **massiv** (vollständig opak) sein. Wenn Sie kein Fallback deklarieren, wird in Browsern, die es nicht unterstützen, keine Farbe angewendet. Dieses Fallback schlägt bei einigen *wirklich* alten Browsern fehl.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}

Seien Sie sich jedoch dieses Fehlers bewusst, der mit der Nichtverwendung von Kurzschriften in IE 6 und 7 zusammenhängt.

Browserunterstützung für RGBa

Zuletzt aktualisiert 05/14/2010

Daten gesammelt aus dieser Demo, die eine vollständigere Liste der Browserkompatibilität enthält.

Ein besseres Fallback für IE

Da IE bedingte Stylesheets unterstützt, können wir diese und einen proprietären Microsoft CSS-Filter verwenden, um das gleiche Ergebnis zu erzielen.

<!--[if IE]>
   
   <style type="text/css">

   .color-block { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    } 

    </style>

<![endif]-->

UPDATE: Wie von einigen Leuten angemerkt, sollte der Alpha-Wert die beiden Ziffern am Anfang des Strings sein, nicht am Ende. Daher habe ich den obigen Code korrigiert. (z. B. startColorstr=#50990000 statt startColorstr=#99000050)

WEITERES UPDATE: Wir sind über den Punkt hinaus, an dem Sie wahrscheinlich nie wieder Filter-Verläufe verwenden müssen. Aber nichtsdestotrotz ist die erste zweistellige Zahl (oben „50“) nicht 50 %. Sie müssen „hexadezimal“ verwenden. Wie Julio Loayza mir schrieb:

rgba(255, 255, 255, 0.5) wäre nicht äquivalent zu (startColorstr=#50FFFFFF, endColorstr=#50FFFFFF)
rgba(255, 255, 255, 0.5) wäre äquivalent zu (startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)

00 ist transparent und FF opak. Hier ist die vollständige Zuordnung:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Weitere Informationen

• Tim Kadlec: Nicht so klar, wie es scheint: CSS3 Opazität und RGBA
• Andy Clarke: Ist CSS3 RGBa bereit, abzugehen?
• Lea Verou: PHP-Bibliothek zum Erstellen von PNG-Dateien mit Alpha-Transparenz als Fallback für RGBa.

Weitere Beispiele

Farbvarianten

Anstatt sich eine Reihe verschiedener Hex-Werte für Graustufen merken oder nachschlagen zu müssen, können Sie einfach RGBa verwenden, um reines Schwarz in einen passenden Farbton anzupassen, z. B. rgba(0, 0, 0, 0.3); Vorausgesetzt, Transparenz ist für die Anwendung akzeptabel (großartig für Schatten, nicht großartig für Text). Es muss natürlich auch nicht schwarz sein, Sie könnten auf diese Weise ein ganzes monochromes Farbschema mit jeder Farbe erstellen.

Außerdem ist HSLa etwas einfacher zu handhaben als RGBa, wenn Sie Farben manuell per Code anpassen müssen.