Maison >interface Web >tutoriel CSS >La notation hexadécimale peut-elle représenter des couleurs partiellement transparentes en CSS ?

La notation hexadécimale peut-elle représenter des couleurs partiellement transparentes en CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-08 00:22:13824parcourir

Can Hexadecimal Notation Represent Partially Transparent Colors in CSS?

CSS Hexadécimal RGBA

Requête :

Existe-t-il une manière concise de représenter des couleurs partiellement transparentes dans hexadécimal ?

Réponse :

Oui, le module de couleur CSS niveau 4 (actuellement au stade de projet de l'éditeur) propose la prise en charge de la notation RGBA hexadécimale à 4 et 8 chiffres. :

Hexadécimal à 4 chiffres Notation

  • Le premier chiffre représente le canal rouge (0-f).
  • Les trois chiffres suivants représentent respectivement les canaux vert, bleu et alpha.

Exemple :

background: #0000; /* Translucency omitted */

8 chiffres Notation hexadécimale

  • Les six premiers chiffres représentent les valeurs RVB (comme avec la notation existante à 6 chiffres).
  • Les deux derniers chiffres représentent le canal alpha (00 = entièrement transparent, ff = entièrement opaque).

Exemple :

background: #00000000; /* Fully transparent */

Futurs navigateurs :

Alors que ces notations ne sont pas encore pris en charge dans les navigateurs actuels, ils seront probablement introduits avec la mise en œuvre de la spécification Color Module Level 4. Gardez un œil sur les mises à jour du navigateur pour vérifier la compatibilité.

Remplacement pour les navigateurs non pris en charge :

En attendant, vous pouvez utiliser des solutions de secours pour garantir la prise en charge dans tous les navigateurs :

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 */
}

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn