it-swarm.com.de

Hex Farben: Numerische Darstellung für "transparent"?

Ich erstelle ein Web-CMS, in dem der Benutzer Farben für bestimmte Website-Elemente auswählen kann. Ich möchte alle Farbwerte in hexadezimal konvertieren, um weitere Formatierungsprobleme ("rgb (x, y, z)" oder benannte Farben) zu vermeiden. Ich habe dafür eine gute JS-Bibliothek gefunden.

Das einzige, was ich nicht in hex bekommen kann, ist "transparent". Ich brauche dies, wenn ich ein Element explizit als transparent deklariere, was sich meiner Erfahrung nach davon unterscheiden kann, überhaupt keinen Wert zu definieren.

Weiß jemand, ob dies in eine numerische Form umgewandelt werden kann? Muss ich alle Verarbeitungsinstanzen einrichten, um Hex-Werte zu akzeptieren oder "transparent"? Ich kann mir keinen anderen Weg vorstellen.

34
Pekka 웃

Transparenz ist eine Eigenschaft außerhalb der Farbe selbst, die auch als alpha -Komponente bezeichnet wird. Sie können es nicht als RGB codieren.

Wenn Sie einen transparenten Hintergrund wünschen, können Sie dies tun:

background: transparent;

Außerdem weiß ich nicht, ob es hilfreich sein könnte oder nicht, aber Sie könnten die Eigenschaft opacity setzen:

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Sie brauchen beides, um es in IE und allen anderen anständigen Browsern zum Laufen zu bringen.

31
Seb

HEXA - #RRGGBBAA

Es gibt eine relativ neue Art der Transparenz, die als [~ # ~] hexa [~ # ~] (HEX + Alpha) bezeichnet wird. Es dauert 8 statt 6 Ziffern. Das letzte Paar ist Alpha. Das Muster der Paare lautet also # RRGGBBAA . Mit 4 Ziffern funktioniert auch: # RGBA

Ich bin mir im Moment nicht sicher, ob der Browser dies unterstützt, aber Sie können in DRAFT Docs nach weiteren Informationen suchen.

§ 4.2. Die hexadezimalen RGB-Notationen: #RRGGBB

Die Syntax eines <hex-color> Ist ein <hash-token> - Token , dessen Wert aus 3, 4, 6 oder 8 hexadezimalen Ziffern besteht . Mit anderen Worten, eine hexadezimale Farbe wird als Hash-Zeichen "#" geschrieben, gefolgt von einer Anzahl von Ziffern 0-9 Oder Buchstaben a-f (Der Fall der Buchstaben spielt keine Rolle - #00ff00 Ist identisch mit #00FF00).

8 Stellen

Die ersten 6 Ziffern werden identisch mit der 6-stelligen Notation interpretiert. Das letzte Ziffernpaar, das als Hexadezimalzahl interpretiert wird, gibt den Alphakanal der Farbe an, wobei 00 Eine vollständig transparente Farbe und ff eine vollständig undurchsichtige Farbe darstellt.

Beispiel 3
Mit anderen Worten, #0000ffcc Repräsentiert dieselbe Farbe wie rgba(0, 0, 100%, 80%) (ein leicht transparentes Blau).

4 Ziffern

Dies ist eine kürzere Variante der 8-stelligen Notation, die genauso "erweitert" ist wie die 3-stellige Notation. Die erste Ziffer, als Hexadezimalzahl interpretiert, gibt den roten Kanal der Farbe an, wobei 0 Den Minimalwert und f das Maximum darstellt. Die nächsten drei Ziffern stehen für die Kanäle Grün, Blau und Alpha.

Zum größten Teil haben Chrome und Firefox damit begonnen, dies zu unterstützen: enter image description here

35
Jomar Sevillejo

Der Alpha-Kanal definiert den Transparenzwert einer Farbe, sodass jede Farbe zu 100% transparent ist, solange der Alpha-Wert 0 beträgt. Typischerweise wird dieser 4-Kanal-Farbtyp als RGBA bezeichnet.

Sie können RGBA in CSS folgendermaßen festlegen:

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

Beachten Sie, dass nicht alle Browser RGBA unterstützen. In diesem Fall können Sie einen Fallback angeben:

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

Weitere Informationen zur Browserunterstützung und zu Problemumgehungen finden Sie hier .

31
fbrereto

Sie können diese Umrechnungstabelle verwenden: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

wenn Sie beispielsweise eine Transparenz von 60% wünschen, verwenden Sie 3C (Hex-Äquivalent).

Dies ist nützlich für IE Hintergrundfarbverlaufstransparenz:

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

dabei sind die ersten Zeichen von startColorstr und endColorstr: 2 ein hexadezimaler Wert für die Transparenz und die verbleibenden sechs sind die hexadezimale Farbe.

5
Idealmind

Hierfür gibt es zwei gängige Ansätze: Entweder reserviere eine bestimmte Farbe als "transparent". In diesem Fall kannst du diese Farbe nicht in Bildern verwenden, ohne dass sie transparent erscheint, oder du definierst einen vierten Kanal neben Rot, Grün und Blau mit der Bezeichnung "Alpha". was auf Transluzenz/Transparenz hinweist.

2
qid