Przezroczystość z RGBA

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 28 z 76.

W CSS kolory RGBA są rozszerzeniem kolorów RGB, które obejmuje kanał alfa służący do określania krycia koloru. RGBA to skrót od Red, Green, Blue i Alpha. Parametr alfa jest liczbą z zakresu od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty), co pozwala tworzyć kolory o różnym stopniu przezroczystości.

Oto podstawowa składnia używania kolorów RGBA w CSS:

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

Na przykład:

p {
    color: rgba(255, 0, 0, 0.5); /* Półprzezroczony czerwony */
    background-color: rgba(0, 255, 0, 0.3); /* Półprzezroczony zielony */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Półprzezroczony niebieski */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Półprzezroczysta czarna nakładka */
}

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem <h3> i akapitem <p>. Twoim zadaniem jest użycie właściwości background-color wraz z funkcją rgba(), aby nadać tym elementom przezroczystość. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h3>. Ustaw kolor tła na niebieski, używając rgba(0, 0, 255, 0.5) (50% przezroczystości).
Napisz regułę CSS, która wybiera element <p>. Ustaw kolor tła na zielony, używając rgba(0, 128, 0, 0.3) (30% przezroczystości).

Spróbuj swoich sił

<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>