Wie vereinfacht das CSS-Farbmodul Level 4 die RGBA-Farbnotation mit Hexadezimalwerten?

Hexadezimale RGBA-Notation in CSS: Die Zukunft enthüllen

Aktuelle hexadezimale Farbnotation

In CSS ist die hexadezimale Schreibweise üblich Wird zur Angabe von Farben verwendet. Beispielsweise steht #ff0000 für reines Rot und #rgba(255, 0, 0, 0.5) erzeugt eine durchscheinende rote Farbe.

Einführung der 4- und 8-stelligen hexadezimalen RGBA-Notation

Das kommende CSS-Farbmodul Level 4 stellt die 4 und vor 8-stellige hexadezimale RGBA-Notation, die eine präzisere Möglichkeit zur Darstellung transparenter Farben im Hexadezimalformat bietet.

8-stellige hexadezimale Notation

RRGGBBAA

• Die ersten 6 Ziffern geben wie beim Standard die RGB-Farbe an 6-stellige Schreibweise.
• Die letzten beiden Ziffern stellen den Alphakanal dar, wobei „00“ für volle Transparenz und „ff“ für keine Transparenz steht.
• #0000ffcc stellt beispielsweise einen leicht transparentes Blau (wie rgba(0, 0, 100 %, 80%)).

4-stellige Hexadezimalschreibweise

RGBA

• Die erste Ziffer gibt den roten Kanal an (wie die erste Ziffer der 8-stelligen Notation).
• Die restlichen drei Ziffern stellen die dar Grün-, Blau- bzw. Alphakanäle, wie in der Standard-RGBA-Notation.
• Zum Beispiel stellt #0000 ein vollständig transparentes Schwarz dar (#0000 mit dem Alphakanal auf 00 eingestellt).

Vorteile der neuen Notation

Die Die 4- und 8-stellige hexadezimale RGBA-Notation bietet die folgenden Vorteile:

• Prägnanter als die RGBA-Notation, insbesondere für Farben mit einfachen Alphawerten.
• Ermöglicht eine einfache Konvertierung zwischen Hexadezimal und Dezimal Darstellungen.

Browser-Unterstützung und Verwendung

Die neue hexadezimale RGBA-Notation wird in gängigen Browsern noch nicht unterstützt. Es wird erwartet, dass es in zukünftigen Versionen unterstützt wird.

Bis dahin können Sie die Fallback-Syntax verwenden, um sowohl moderne als auch ältere Browser zu unterstützen, wie unten gezeigt:

figure {
  background: #FEFE7F;
  color: #3F3FFE;
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F;
  color: #0000ffbe;
}

Das obige ist der detaillierte Inhalt vonWie vereinfacht das CSS-Farbmodul Level 4 die RGBA-Farbnotation mit Hexadezimalwerten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!