2014-07-02 10 views
12

ich über die Verwendung Standardfarben in CSS verschoben haben, indem sie orange erklärt, blue, aquamarine, etc ... und haben rgb() benutze wie so für den gleichen Farben jeweils , rgb(255,165,0), rgb(0,0,255) und rgb(127,255,212) (dank dem ColorHighlighter Paket in ST3).Was sind Unterschiede zwischen RGB vs RGBA andere als ‚Opazität‘

Nach dem Ändern eines Gradienten für Bootstrap .btn bin ich auf rgba() gestoßen. Schnelle Forschung erklärt, dass a für alpha steht, und theres eine ganze Reihe von integralen Mathe zugeschrieben Catmull und Smith. Es ist auch leicht zu finden, dass der Alpha-Kanal für "Alpha-Compositing" verwendet wird, was meist als "Opazität" bezeichnet werden kann.

  • Gibt es Unterschiede zwischen den beiden außer der Opazität?
  • Warum ist es nicht Konvention RGBA zu verwenden. (Ich gehe davon aus das da ich bin gerade jetzt auf diese Stolper)
  • Gibt es andere Einschränkungen, die wissen sollten, wenn rgba() für das Web?
  • Gibt es eine Verknüpfung, um die Opazität neben einer Farbverknüpfung zu deklarieren? (Dh color: salmon:.5;)
  • von einem Web-Entwickler Sicht muss ich über die Unterschiede zwischen ARGB, RGBA, BGRA Byte-Reihenfolge für verschiedene Maschinen INFO Sorgen machen?
  • Weitere wichtige Informationen?
+1

_ "Gibt es Unterschiede zwischen den beiden außer der Opazität?" _ Nein. Siehe http://dev.w3.org/csswg/css-color/#rgb-functions – j08691

Antwort

18

RGB ist ein 3-Kanal-Format enthält Daten für Rot, Grün, und Blau. RGBA ist ein 4-Kanal-Format mit Daten für Rot, Grün, Blau und Alpha.

Es ist nicht sinnvoll, den Alpha-Kanal zu verwenden, außer die Farbe transparent/opak (oder teilweise transparent; durchscheinend) zu machen.

In CSS hatte rgb() mehrere Jahre lang eine breite Browserunterstützung, bevor rgba() die gleiche Unterstützung erhielt. Dies ist einer der Gründe, warum Sie in CSS mehr rgb() finden als rgba(). Der andere Grund ist, dass Transluzenz nicht überall üblich ist.

Sie könnten einen RGB-Wert finden, der in 16 Bits gepackt ist, mit 5 Bits für Blau und Rot und 6 Bits für Grün (Grün erhält mehr Bits, weil das Auge mehr Schattierungen von Grün erkennt). Sie können auch einen RGBA-Wert finden, der in 16 Bits gepackt ist, mit 5 Bits für jede Farbe und 1 Bit für Alpha. Mit einem Bit können Sie die Farbe nur vollständig transparent oder nicht transparent machen.

In der Regel finden Sie RGB und RGBA in 32-Bit-Werten mit 8 Bit für jede Farbe und 8 Bit für Alpha (oder leer für RGB).

In CSS entschieden sich die Entwickler, die Werte 0 bis 255 (den Bereich für einen 8-Bit-Wert) für Rot, Grün und Blau zu verwenden, aber für den Alphakanal einen Wert zwischen 0,0 und 1,0. Das tatsächliche Byteformat für die Farbe ist für Webentwickler irrelevant.

Meiner Erfahrung nach werden weder rgb() noch rgba() sehr oft in CSS verwendet. Sechseckfarben sind viel dominanter und älter als einige Jahre.

HSL ist eigentlich ein viel besseres Format für die Arbeit mit Farben und wird in CSS unterstützt (IE9 +, Firefox, Chrome, Safari und in Opera 10+.).

http://www.w3schools.com/cssref/css_colors_legal.asp

0

rgb ist Standard-RGB-Werte (rot, grün, blau)

rgba ist Standard-RGB-Werte (rot, grün, blau + Alpha (aka Opazität))

Sie werden keine Farbe finden Variationen. RGBA ist eine CSS3-Farbeigenschaft.

Da ältere Browser-Unterstützung beschränkt werden kann, sollten Sie eine Ersatzfarbe als solche verwenden:

CSS:

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

OP hat ein halbes Dutzend Fragen und Sie einfach wiederholte, was er sagte er bereits entdeckt. – j08691

+0

Ich habe zu früh eingereicht. Entschuldigung für das j08691 – remixdesign

1

RGB ist Standard-RGB-Farben, Sie schon verstehen.

RGBa ist Standard RGB Farben, aber mit der Alpha/Opazität auch.

Ansonsten gibt es keinen Unterschied, die Farben sind immer noch gleich.

Problem mit der Verwendung dieser und anderen CSS3 Farbstile ist, dass es nicht immer unterstützt wird. Hier ist a link Ich fand, dass Ihnen sagt, welche Versionen von Browsern es unterstützen.

Deklarieren alpha in CSS wie dieses RGBA aussehen würde (0, 0, 0, .3) mit der Alpha-Dezimal- oder ganze Zahl von 1 bis sein. 1 ist opak und 0 ist vollständig transparent.