Heim >Web-Frontend >CSS-Tutorial >Kann die Hexadezimalschreibweise teilweise transparente Farben in CSS darstellen?

Kann die Hexadezimalschreibweise teilweise transparente Farben in CSS darstellen?

Barbara Streisand
Barbara StreisandOriginal
2024-12-08 00:22:13824Durchsuche

Can Hexadecimal Notation Represent Partially Transparent Colors in CSS?

CSS Hexadezimal RGBA

Abfrage:

Gibt es eine präzise Möglichkeit, teilweise transparente Farben darzustellen? hexadezimal?

Antwort:

Ja, das CSS Color Module Level 4 (derzeit im Entwurfsstadium des Herausgebers) schlägt Unterstützung für die 4- und 8-stellige hexadezimale RGBA-Notation vor :

4-stellige Hexadezimalzahl Notation

  • Die erste Ziffer repräsentiert den roten Kanal (0-f).
  • Die folgenden drei Ziffern repräsentieren den grünen, blauen und Alpha-Kanal, bzw.

Beispiel:

background: #0000; /* Translucency omitted */

8-stellige Hexadezimalschreibweise

  • Die erste Sechs Ziffern stellen die RGB-Werte dar (wie bei der bestehenden 6-stelligen Notation).
  • Die Die letzten beiden Ziffern stellen den Alphakanal dar (00 = vollständig transparent, ff = vollständig undurchsichtig).

Beispiel:

background: #00000000; /* Fully transparent */

Zukünftige Browser :

Obwohl diese Notationen in aktuellen Browsern noch nicht unterstützt werden, werden sie wahrscheinlich mit dem eingeführt Implementierung der Color Module Level 4-Spezifikation. Behalten Sie Browser-Updates im Auge, um die Kompatibilität zu gewährleisten.

Fallback für nicht unterstützende Browser:

In der Zwischenzeit können Sie Fallbacks verwenden, um die Unterstützung in allen Browsern sicherzustellen:

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

Das obige ist der detaillierte Inhalt vonKann die Hexadezimalschreibweise teilweise transparente Farben in CSS darstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn