Comment le module de couleurs CSS niveau 4 simplifie-t-il la notation des couleurs RGBA avec des valeurs hexadécimales ?

Notation hexadécimale RGBA en CSS : dévoiler l'avenir

Notation hexadécimale des couleurs actuelle

En CSS, La notation hexadécimale est couramment utilisée pour spécifier les couleurs. Par exemple, #ff0000 représente le rouge pur et #rgba(255, 0, 0, 0.5) crée une couleur rouge translucide.

Présentation de la notation RGBA hexadécimale à 4 et 8 chiffres

Le prochain module CSS Color niveau 4 présente les 4 et Notation RGBA hexadécimale à 8 chiffres, offrant une manière plus concise de représenter les couleurs transparentes au format hexadécimal.

🎜>

Les 6 premiers chiffres précisent la couleur RVB comme le standard Notation à 6 chiffres.

Les deux derniers chiffres représentent le canal alpha, avec « 00 » pour une transparence totale et « ff » pour aucune transparence.

• Par exemple, #0000ffcc représente un légèrement- bleu transparent (identique à rgba(0, 0, 100%, 80%)).

• Notation hexadécimale à 4 chiffres

• RGBA

Le premier chiffre spécifie le canal rouge (comme le premier chiffre de la notation à 8 chiffres).

Les trois chiffres restants représentent respectivement les canaux vert, bleu et alpha, comme dans la notation rgba standard.

• Par exemple, #0000 représente un noir entièrement transparent (#0000 avec le canal alpha réglé sur 00).

• Avantages de la nouvelle notation

• Le La notation RGBA hexadécimale à 4 et 8 chiffres offre les avantages suivants :

Plus concise que la notation rgba, en particulier pour les couleurs avec des valeurs alpha simples.

Permet une conversion facile entre hexadécimal et décimal. représentations.

• Prise en charge du navigateur et Utilisation

• La nouvelle notation hexadécimale RGBA n'est pas encore prise en charge dans les principaux navigateurs. Il devrait être pris en charge dans les versions futures.

En attendant, vous pouvez utiliser une syntaxe de secours pour prendre en charge les navigateurs modernes et anciens, comme indiqué ci-dessous :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!