2013-04-11 30 views
25

Sollten Sie rgba(0, 0, 0, 0) oder rgba(255, 255, 255, 0) für Transparenz in CSS verwenden?Sollten Sie rgba (0, 0, 0, 0) oder rgba (255, 255, 255, 0) für Transparenz in CSS verwenden?

Was sind die Vor- und Nachteile von jedem?

+0

Eins ist weiß und eins ist schwarz, wenn Sie die Opazität ändern möchten. Ansonsten ist es immer noch transparent. Was ist das Szenario, in dem das als Frage auftaucht? –

+4

"@JackManey" Warum würde es eine Rolle spielen? "Ich weiß es nicht. Deshalb habe ich gefragt. – Joe

Antwort

49

Der letzte Parameter der Funktion rgba() ist der Parameter "alpha" oder "opacity". Wenn Sie es auf 0 setzen, bedeutet das "vollständig transparent", und die ersten drei Parameter (die red, green und blue Kanäle) sind nicht wichtig, weil Sie die Farbe sowieso nicht sehen können.

, die mit im Auge, würde ich rgba(0, 0, 0, 0) wählen, weil:

  1. es weniger tippen ist,
  2. es ein paar zusätzlichen Bytes aus Ihrer CSS-Datei hält, und
  3. werden Sie ein offensichtliches Problem sehen wenn sich der Alpha-Wert zu etwas unerwünschtem ändert.

Sie könnte vermeiden rgba Modell ganz und verwenden Sie die transparent Schlüsselwort statt, die nach w3.org, auf „transparent black“ entspricht und zu rgba(0, 0, 0, 0) berechnen sollte. Zum Beispiel:

h1 { 
    background-color: transparent; 
} 

Das spart Ihnen noch ein anderes Paar Bytes, während die Absichten der Transparenz mit der Hand sind (im Falle eines unbekannten mit RGBA).

Ab CSS3 können Sie das Schlüsselwort transparent für jede CSS-Eigenschaft verwenden, die eine Farbe akzeptiert.

8

Es gibt zwei Möglichkeiten, eine Farbe mit Alpha zu speichern. Das Erste ist genau so, wie Sie es sehen, mit jeder Komponente wie sie ist. Die zweite besteht darin, vorvervielfachtes Alpha zu verwenden, wobei die Farbwerte mit dem Alpha multipliziert werden, nachdem es in den Bereich 0.0-1.0 konvertiert wurde; Dies wird gemacht, um compositing einfacher zu machen. Normalerweise sollten Sie nicht bemerken oder sich darum kümmern, welcher Weg von einer bestimmten Engine implementiert wird, aber es gibt Fälle, in denen Sie möglicherweise, zum Beispiel, wenn Sie versucht haben, die Deckkraft der Farbe zu erhöhen. Wenn Sie rgba(0, 0, 0, 0) verwenden, ist es weniger wahrscheinlich, dass Sie einen Unterschied zwischen den beiden Ansätzen sehen.

+4

Das ist die richtige Antwort.Insbesondere gilt der Teil, der besagt, dass es "Fälle gibt, in denen Sie die Deckkraft der Farbe erhöhen könnten", insbesondere wenn Sie mit Farbverläufen arbeiten, wie das Modul Bildwerte (http: // www .w3.org/TR/css3-images/# color-stop-syntax) Farbverlaufsfarben werden in einem vormultiplizierten RGBA-Raum berechnet. Beachten Sie jedoch, dass die Implementierungen immer noch von Browser zu Browser variieren. Insbesondere einige aktuelle Versionen verletzen diese Anforderung in der Spezifikation (obwohl ich der Meinung bin, dass sie erst nach einer letzten Überarbeitung spezifiziert wurde). – BoltClock

1

es ein kleiner Unterschied, wenn u RGBA verwenden (255,255,255, a) ist, wird die Hintergrundfarbe mehr und mehr leichter als den Wert von ‚eine‘ Erhöhung von 0,0 bis 1,0. Wo wenn rgba (0,0,0, a) verwendet wird, wird die Hintergrundfarbe immer dunkler, wenn der Wert von 'a' von 0,0 auf 1,0 steigt. Nachdem das gesagt wurde, ist klar, dass sowohl (255,255,255,0) als auch (0,0,0,0) den Hintergrund transparent machen. (255,255,255,1) würde den Hintergrund komplett weiß machen, während (0,0,0,1) den Hintergrund komplett schwarz machen würde.

+2

Dies beantwortet die Frage nicht wirklich und enthält in keinem Fall Informationen, die nicht bereits von mindestens einer der anderen Antworten auf diese Frage bereitgestellt werden. –

+1

Wie können Sie sagen, dass es die Frage nicht beantwortet! Ich habe versucht, das Konzept hinter rgba() zu erklären, damit die Vor- und Nachteile verstanden werden können. –

+2

Sie haben erklärt, was 'rgba (...)' tut, aber das ist nicht, was das OP gefragt hat. Schau dir einfach die anderen Antworten zu dieser Frage an, sie sind ganz anders als deine. –

Verwandte Themen