Couleurs hexagonales: représentation numérique pour "transparent"?
Je construis un CMS web dans lequel l'utilisateur peut choisir des couleurs pour certains éléments du site. Je voudrais convertir toutes les valeurs de couleur en hexadécimal pour éviter tout autre problème de formatage ("rgb (x, y, z)" ou couleurs nommées). J'ai trouvé une bonne bibliothèque JS pour cela.
La seule chose que je ne peux pas entrer dans hex est "transparent". J'en ai besoin lorsque je déclare explicitement un élément comme transparent, ce qui, dans mon expérience, peut être différent de ne pas définir de valeur du tout.
Est-ce que quelqu'un savoir si cela peut être transformé en une forme numérique? Devrai-je configurer toutes les instances de traitement pour accepter les valeurs hexadécimales ou "transparent"? Je ne peux pas penser à une autre façon.
7 réponses
La transparence est une propriété en dehors de la couleur elle-même, également connue sous le nom de Composant alpha. Vous ne pouvez pas le coder comme RVB.
Si vous voulez un arrière-plan transparent, vous pouvez le faire:
background: transparent;
De plus, Je ne sais pas si cela peut être utile ou non mais, vous pouvez définir la propriété opacity:
.half{
opacity: 0.5;
filter: alpha(opacity=50);
}
Vous avez besoin des deux pour le faire fonctionner dans IE et tous les autres navigateurs décents.
Le canal alpha définit la valeur de transparence d'une couleur, de sorte que toute couleur est transparente à 100% tant que la valeur alpha est 0. Typiquement, ce type de couleur à quatre canaux est connu sous le nom de RGBA.
Vous pouvez spécifier RGBA en CSS comme ceci:
div {
background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}
Notez que tous les navigateurs ne prennent pas en charge RGBA, auquel cas vous pouvez spécifier un fallback :
div {
background: rgb(200, 54, 54); /* fallback */
background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}
Plus d'informations sur le support du navigateur et les solutions de contournement peuvent être trouvées ici.
HEXA - # RRGGBBAA
Il y a une façon relativement nouvelle de faire de la transparence, elle s'appelle HEXA (HEX + Alpha). Il prend 8 chiffres au lieu de 6. La dernière paire est Alpha. Donc, le motif des paires est #RRGGBBAA . Avoir 4 chiffres fonctionne également: # RGBA
Je ne suis pas sûr de son support de navigateur pour l'instant mais, vous pouvez vérifier le DRAFT Docs pour plus d'informations.
§ 4.2. Les notations hexadécimales RVB: # RRGGBB
La syntaxe d'un
<hex-color>est un<hash-token>jeton , dont la valeur se compose de 3, 4, 6, ou 8 chiffres hexadécimaux. En d'autres termes, une couleur hexadécimale est écrit comme un dièse, "#", suivie d'un certain nombre de chiffres0-9ou lettresa-f(le cas des lettres n'a pas d'importance -#00ff00est identique à#00FF00).8 chiffres
Les 6 premiers chiffres sont interprétés de manière identique à la notation à 6 chiffres. La dernière paire de chiffres, interprété comme un nombre hexadécimal, spécifie le canal alpha de la couleur, où
00représente une couleur entièrement transparente etffreprésente une couleur entièrement opaque.Exemple 3
En d'autres termes,#0000ffccreprésente la même couleur quergba(0, 0, 100%, 80%)(légèrement transparent bleu).4 chiffres
C'est une variante plus courte de la notation à 8 chiffres, "développée" de la même manière que la notation à 3 chiffres. Le premier chiffre, interprétée comme un nombre hexadécimal, spécifie le canal rouge de la couleur, où
0représente la valeur minimale etfreprésente le maximum. Les trois chiffres suivants représentent les canaux vert, bleu et alpha, respectivement.
Pour la plupart, Chrome et Firefox ont commencé à soutenir cela:
Vous pouvez utiliser cette table de conversion: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html
Par exemple, si vous voulez une transparence de 60%, vous utilisez 3C (équivalent hexadécimal).
Ceci est utile pour la transparence du gradient D'arrière-plan IE:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";
Où startColorstr et endColorstr: 2 les premiers caractères sont une valeur hexadécimale pour la transparence, et les six restants sont la couleur hexadécimale.
Il existe deux approches communes pour cela: soit réserver une couleur spécifique comme étant "transparente", auquel cas vous ne pouvez pas utiliser cette couleur dans les images sans qu'elle apparaisse transparente, soit définir un quatrième canal aux côtés du rouge, du vert et du bleu appelé" alpha " qui indique la translucidité/transparence.
Utilisez le code hexadécimal suivant pour la couleur du texte transparent: # 00FFFF00
J'essayais aussi de transparence-peut - être que vous pourriez essayer de laisser vide la valeur de background, par exemple quelque chose comme
bgcolor=" "