Maison > interface Web > tutoriel CSS > Existe-t-il une notation hexadécimale concise pour les couleurs RGBA en CSS ?

Existe-t-il une notation hexadécimale concise pour les couleurs RGBA en CSS ?

Susan Sarandon
Libérer: 2024-12-07 19:05:15
original
329 Les gens l'ont consulté

Is There a Concise Hexadecimal Notation for RGBA Colors in CSS?

Notation RGBA hexadécimale CSS

Problème : Actuellement, CSS prend en charge la notation des couleurs RGBA en utilisant des valeurs décimales (par exemple, rgba(255, 0, 0 , 0,5)). Existe-t-il une manière plus concise de spécifier des couleurs partiellement transparentes en hexadécimal ?

Réponse :

Le module de couleurs CSS niveau 4 (qui est actuellement sous forme de brouillon) est attendu pour introduire la prise en charge de la notation RGBA hexadécimale à 4 et 8 chiffres.

Comment cela Fonctionne

Notation à 8 chiffres :

  • Les 6 premiers chiffres représentent les valeurs hexadécimales pour les canaux rouge, vert et bleu.
  • Les 2 derniers chiffres représentent le canal alpha, 00 étant entièrement transparent et FF étant entièrement opaque.

Notation à 4 chiffres :

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

Exemple

En utilisant la notation à 8 chiffres, la couleur hexadécimale suivante représente un bleu légèrement transparent :

#0000ffcc
Copier après la connexion

Cela équivaut à ce qui suit Notation RGBA :

rgba(0, 0, 100%, 80%)
Copier après la connexion

Support du navigateur

Au moment de En écrivant cet article (début 2015), aucun navigateur ne prenait en charge la notation de couleur #RRGGBBAA. Cependant, vous pouvez utiliser la technique de secours suivante pour commencer à l'utiliser dès aujourd'hui :

figure {
  background: #FEFE7F;
  color: #3F3FFE;
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F;
  color: #0000ffbe;      
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal