web-dev-qa-db-fra.com

Couleurs Hex: Représentation numérique pour "transparent"?

Je construis un CMS Web dans lequel l'utilisateur peut choisir les couleurs de certains éléments du site. Je souhaite convertir toutes les valeurs de couleur au format hexadécimal pour éviter tout problème de formatage supplémentaire ("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 l'hex est "transparente". J'ai besoin de cela lorsque je déclare explicitement un élément comme transparent, ce qui, selon mon expérience, peut être différent de ne définir aucune valeur.

Est-ce que quelqu'un sait si cela peut être transformé en une forme numérique? Devrai-je configurer toutes les instances de traitement pour accepter les valeurs hexadécimales o "transparent"? Je ne peux pas penser à un autre moyen.

csscolorstransparencyrgb
34
Pekka 웃

La transparence est une propriété en dehors de la couleur elle-même, également appelée composant alpha. Vous ne pouvez pas le coder comme RVB.

Si vous voulez un fond transparent, vous pouvez faire ceci:

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.

31
Seb

HEXA - #RRGGBBAA

Il existe une manière relativement nouvelle de faire de la transparence, elle s'appelle [~ # ~] hexa [~ # ~] (HEX + Alpha). Il faut 8 chiffres au lieu de 6. La dernière paire est Alpha. Ainsi, le modèle de paires est # RRGGBBAA . Avoir 4 chiffres fonctionne également: # RGBA

Je ne suis pas sûr de la prise en charge de son navigateur pour le moment, mais vous pouvez consulter le DRAFT Docs pour plus d'informations.

§ 4.2. Les notations hexadécimales RGB: #RRGGBB

La syntaxe de <hex-color> Est un jeton <hash-token> dont la valeur consiste en 3, 4, 6 ou 8 chiffres hexadécimaux En d’autres termes, une couleur hexadécimale est écrite sous la forme d’un caractère dièse, "#", suivi d’un certain nombre de chiffres 0-9 Ou de lettres a-f (La casse des lettres importe peu - #00ff00 Est 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ée comme un nombre hexadécimal, spécifie le canal alpha de la couleur, où 00 Représente une couleur entièrement transparente et ff, une couleur totalement opaque.

Exemple 3
En d'autres termes, #0000ffcc Représente la même couleur que rgba(0, 0, 100%, 80%) (un bleu légèrement transparent).

4 chiffres

Il s’agit d’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é comme un nombre hexadécimal, spécifie le canal rouge de la couleur, où 0 Représente la valeur minimale et f représente le maximum. Les trois chiffres suivants représentent respectivement les canaux vert, bleu et alpha.

Pour la plupart, Chrome et Firefox ont commencé à supporter ceci: enter image description here

35
Jomar Sevillejo

Le canal alpha définit la valeur de transparence d'une couleur. Par conséquent, toute couleur est transparente à 100% tant que la valeur alpha est égale à 0. Ce type de couleur à quatre canaux est généralement appelé RGBA.

Vous pouvez spécifier RGBA en CSS comme suit:

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

Notez que tous les navigateurs ne prennent pas en charge RGBA. Dans ce cas, vous pouvez spécifier un repli :

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 sont disponibles ici .

31
fbrereto

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 IE transparence du dégradé d’arrière-plan:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

où startColorstr et endColorstr: 2 premiers caractères sont une valeur hexadécimale pour la transparence et les six restants sont la couleur hexadécimale.

5
Idealmind

Il existe deux approches communes à cet égard: soit réserver une couleur spécifique comme "transparente", auquel cas vous ne pouvez pas utiliser cette couleur dans les images sans la rendre transparente, ou définir un quatrième canal à côté de rouge, vert et bleu appelé "alpha". qui indique la translucidité/transparence.

2
qid