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

Folha de consulta

As cores RGBA estendem as cores RGB com um canal alfa para opacidade. O parâmetro alfa varia de 0.0 (totalmente transparente) a 1.0 (totalmente opaco).

Sintaxe básica:

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

Exemplos:

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

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

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>