Transparência com RGBA

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

No CSS, cores RGBA são uma extensão das cores RGB que incluem um canal alfa para especificar a opacidade de uma cor. RGBA significa Red, Green, Blue e Alpha. O parâmetro alfa é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco), permitindo que você crie cores com vários graus de transparência.

Aqui está a sintaxe básica para usar cores RGBA no 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>