Transparência com RGBA

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 28 de 76.

Em CSS, as cores RGBA são uma extensão das cores RGB que incluem um canal alfa para especificar a opacidade de uma cor. RGBA significa Vermelho, Verde, Azul e Alfa. O parâmetro alfa é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco), permitindo que você crie cores com diferentes graus de transparência.

Esta é a sintaxe básica para usar cores RGBA em CSS:

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

Por exemplo:

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

h1 {
    color: rgba(0, 0, 255, 0.7); /* Azul semitransparente */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Sobreposição preta semitransparente */
}

Desafio

Fácil

Você recebeu um documento HTML com um cabeçalho <h3> e um parágrafo <p>. Sua tarefa é usar a propriedade background-color com a função rgba() para estilizar esses elementos com transparência. Siga os passos abaixo:

Escreva uma regra CSS que selecione o elemento <h3>. Defina a cor de fundo para azul usando rgba(0, 0, 255, 0.5) (50% de transparência).
Escreva uma regra CSS que selecione o elemento <p>. Defina a cor de fundo para verde usando rgba(0, 128, 0, 0.3) (30% de transparência).

Experimente você mesmo

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