Transparente Farben

Im CSS-Kurs hast du Farben mit einem Alphawert transparent gemacht, zum Beispiel rgba(71, 105, 88, 0.2) oder rgb(255 0 0 / 50%). In Tailwind schreibst du hinter die Farbe einen Schrägstrich und eine Zahl: ihre Deckkraft in Prozent, von 0 (völlig transparent) bis 100 (deckend). Tailwind nennt das den Opacity-Modifier:

(Das genaue CSS von Tailwind kommt auf anderem Weg dorthin, aber die Farbe ist dieselbe.) Vielfache von 5 oder 10 sind am gebräuchlichsten, aber jede Zahl von 0 bis 100 funktioniert. Und es gibt noch eine Farbe, transparent: bg-transparent macht einen Hintergrund völlig durchsichtig.

Eine transparente Farbe lässt durchscheinen, was dahinter liegt. Das ist praktisch, wenn die Farbe dahinter nicht immer dieselbe ist. Ein Hintergrund mit bg-black/50 über einem Foto zum Beispiel dunkelt es ab, damit weißer Text darauf gut zu lesen ist. Und ein heller, transparenter Farbton passt auf jeden Hintergrund:

ein markiertes Wort ein markiertes Wort ein markiertes Wort

Wir verwenden ihn wie einen Textmarker: Die Wörter „bereit für ein neues Zuhause“ im Absatz über die Vermittlung stehen in einem Element strong und bekommen einen hellorangen Hintergrund, durch den die Seite scheint.

Der Schrägstrich macht nur diese eine Farbe transparent. Um ein ganzes Element mit allem darin auszublenden, hat CSS die Eigenschaft opacity, die du aus dem CSS-Kurs kennst; ihre Klassen lernst du in der Lektion über Rahmen, Schatten und Bilder kennen.