Transparenz mit RGBA

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

In CSS sind RGBA-Farben eine Erweiterung von RGB-Farben, die einen Alphakanal enthalten, um die Deckkraft einer Farbe festzulegen. RGBA steht für Rot, Grün, Blau und Alpha. Der Alphaparameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig), wodurch du Farben mit unterschiedlichen Transparenzgraden erstellen kannst.

Hier ist die grundlegende Syntax zur 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).

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>