Transparenz mit RGBA

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 28 von 76.

In CSS sind RGBA-Farben eine Erweiterung von RGB-Farben, die einen Alpha-Kanal enthalten, um die Deckkraft einer Farbe festzulegen. RGBA steht für Red, Green, Blue und Alpha. Der Alpha-Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend), was es Ihnen ermöglicht, Farben mit unterschiedlichen Transparenzstufen zu erstellen.

Hier ist die grundlegende Syntax für die Verwendung von RGBA-Farben in CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Zum Beispiel:

p {
    color: rgba(255, 0, 0, 0.5); /* Halbtransparentes Rot */
    background-color: rgba(0, 255, 0, 0.3); /* Halbtransparentes Grün */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Halbtransparentes Blau */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einer <h3>-Überschrift und einem <p>-Absatz. Ihre Aufgabe ist es, die Eigenschaft background-color mit der Funktion rgba() zu verwenden, um diese Elemente mit Transparenz zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h3>-Element abzielt. Setzen Sie die Hintergrundfarbe auf Blau unter Verwendung von rgba(0, 0, 255, 0.5) (50% Transparenz).
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie die Hintergrundfarbe auf Grün unter Verwendung von rgba(0, 128, 0, 0.3) (30% Transparenz).

Spickzettel

RGBA-Farben erweitern RGB-Farben um einen Alpha-Kanal für die Deckkraft. Der Alpha-Parameter reicht von 0.0 (vollständig transparent) bis 1.0 (vollständig deckend).

Grundlegende Syntax:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Beispiele:

p {
    color: rgba(255, 0, 0, 0.5); /* Halbtransparentes Rot */
    background-color: rgba(0, 255, 0, 0.3); /* Halbtransparentes Grün */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
}

Probier es selbst

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>