Transparencia con RGBA

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 28 de 76.

En CSS, los colores RGBA son una extensión de los colores RGB que incluyen un canal alfa para especificar la opacidad de un color. RGBA significa Red, Green, Blue y Alpha. El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco), lo que le permite crear colores con diversos grados de transparencia.

Aquí está la sintaxis básica para usar colores RGBA en CSS:

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

Por ejemplo:

p {
    color: rgba(255, 0, 0, 0.5); /* Rojo 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); /* Superposición negra semitransparente */
}

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado <h3> y un párrafo <p>. Tu tarea es usar la propiedad background-color con la función rgba() para dar estilo a estos elementos con transparencia. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h3>. Establece el color de fondo a azul usando rgba(0, 0, 255, 0.5) (50% de transparencia).
Escribe una regla CSS que apunte al elemento <p>. Establece el color de fondo a verde usando rgba(0, 128, 0, 0.3) (30% de transparencia).

Hoja de referencia

Los colores RGBA extienden los colores RGB con un canal alfa para la opacidad. El parámetro alfa varía de 0.0 (completamente transparente) a 1.0 (completamente opaco).

Sintaxis básica:

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

Ejemplos:

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

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Superposición negra semitransparente */
}

Pruébalo tú mismo

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