CSS3 Farb-Transparenz mit RGBA

In meinem letzten Beitrag habe ich zur Erzeugung einer Transparenz die CSS3-Eigenschaft opacity verwendet.

Als „Nachteil“ (wenn man denn hier überhaupt von einem Nachteil sprechen kann, es ist eine Eigenschaft mit bestimmten Werten und genau das liefert sie!) der Eigenschaft opacity wird oft genannt, das die Transparenz auf alle Kindelemente vererbt wird und somit z. B. auch ein Text innerhalb eines Elementes die Eigenschaft annimmt und dadurch „unlesbar“ wird.

Der „Vorteil“ (und das muss man dann auch nennen,) ist, das man nicht nur Farben, sondern auch Bildern und Fotos Transparenz zuweisen kann.

Zur Erzeugung einer Farb-Transparenz wurde dem CSS Color-Modul in Level 3 aber auch das „A“, der Alpha-Wert im RGB Farbraum hinzugefügt.
Dieser Alpha-Wert drückt in Werten von 0.0 bis 1 die Transparenz aus.
(0.0 = völlige Transparenz, 1 = keine Transparenz)

Mein Beispiel aus dem Beitrag mit der CSS3-Eigenschaft opacity nun mit den RGBA-Angaben.

orange = RGB 255, 165, 0

Alpha-Wert: 0.1

Alpha-Wert: 0.2

Alpha-Wert: 0.3

Alpha-Wert: 0.4

Alpha-Wert: 0.5

Alpha-Wert: 0.6

Alpha-Wert: 0.7

Alpha-Wert: 0.8

Alpha-Wert: 0.9

Alpha-Wert: 1.0

Kommentar (1)

  1. Pingback: HSL Farben, HSL-Farbangaben und HSLA | CSS3.de

Kommentare sind geschlossen.