Trasparenza con RGBA

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 28 di 76.

In CSS, i colori RGBA sono un’estensione dei colori RGB che include un canale alfa per specificare l’opacità di un colore. RGBA sta per Red, Green, Blue e Alpha. Il parametro alfa è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), che ti permette di creare colori con diversi gradi di trasparenza.

Ecco la sintassi di base per usare i colori RGBA in CSS:

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

Per esempio:

p {
    color: rgba(255, 0, 0, 0.5); /* Rosso semitrasparente */
    background-color: rgba(0, 255, 0, 0.3); /* Verde semitrasparente */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Blu semitrasparente */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Sovrapposizione nera semitrasparente */
}

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione <h3> e un paragrafo <p>. Il tuo compito è usare la proprietà background-color con la funzione rgba() per applicare a questi elementi uno stile con trasparenza. Segui i passaggi qui sotto:

Scrivi una regola CSS che selezioni l'elemento <h3>. Imposta il colore di sfondo su blu usando rgba(0, 0, 255, 0.5) (50% di trasparenza).
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta il colore di sfondo su verde usando rgba(0, 128, 0, 0.3) (30% di trasparenza).

Provalo tu

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