Transparence avec RGBA

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 28 sur 76.

En CSS, les couleurs RGBA sont une extension des couleurs RGB qui incluent un canal alpha pour spécifier l'opacité d'une couleur. RGBA signifie Red, Green, Blue, et Alpha. Le paramètre alpha est un nombre compris entre 0.0 (entièrement transparent) et 1.0 (entièrement opaque), vous permettant de créer des couleurs avec différents degrés de transparence.

Voici la syntaxe de base pour utiliser les couleurs RGBA en CSS :

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

Par exemple :

p {
    color: rgba(255, 0, 0, 0.5); /* Rouge semi-transparent */
    background-color: rgba(0, 255, 0, 0.3); /* Vert semi-transparent */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Bleu semi-transparent */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Superposition noire semi-transparente */
}

Défi

Facile

On vous donne un document HTML avec un titre <h3> et un paragraphe <p>. Votre tâche consiste à utiliser la propriété background-color avec la fonction rgba() pour styliser ces éléments avec de la transparence. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h3>. Définissez la couleur d'arrière-plan sur bleu en utilisant rgba(0, 0, 255, 0.5) (50 % de transparence).
Écrivez une règle CSS qui cible l'élément <p>. Définissez la couleur d'arrière-plan sur vert en utilisant rgba(0, 128, 0, 0.3) (30 % de transparence).

Aide-mémoire

Les couleurs RGBA étendent les couleurs RGB avec un canal alpha pour l'opacité. Le paramètre alpha varie de 0.0 (entièrement transparent) à 1.0 (entièrement opaque).

Syntaxe de base :

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

Exemples :

p {
    color: rgba(255, 0, 0, 0.5); /* Rouge semi-transparent */
    background-color: rgba(0, 255, 0, 0.3); /* Vert semi-transparent */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Superposition noire semi-transparente */
}

Essayez vous-même

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