Exercice 5.5 · 6 min · 0 tentative
Le quatrième nombre
🎯 Objectif
Découvrir le canal alpha : rendre une couleur plus ou moins transparente avec rgba().
📖 Exemple
La chorale pose un badge blanc sur son fond turquoise — mais un blanc à 70 %, qui laisse le fond respirer :
<h1>Répétition annulée</h1>
<p class="badge">Reprise jeudi prochain, même heure.</p>
body {
background-color: teal;
color: white;
}
.badge {
background-color: rgba(255, 255, 255, 0.7);
color: #1e293b;
}
rgba() c'est rgb() plus un quatrième nombre : l'opacité, de 0 (invisible) à 1 (opaque). À 0.7, le badge est blanc aux sept dixièmes — le turquoise traverse doucement, et le badge semble appartenir au fond au lieu de flotter dessus.
C'est l'astuce des bandeaux, étiquettes et encarts posés sur un fond coloré : la couleur du dessous participe, la lisibilité reste.
📝 Consigne
L'affiche du loto a son fond doré et son texte — mais ses deux encarts sont encore invisibles. Écris deux règles :
- L'encart
.principale: un fond blanc presque opaque, rgba(255, 255, 255, 0.9) - L'encart
.discrete: le même blanc, bien plus transparent, rgba(255, 255, 255, 0.4)
Résultat attendu
Deux bandeaux blancs sur l'or : le premier bien net, le second en voile léger qui laisse traverser le fond. Même couleur, deux opacités — tout est dans le quatrième nombre.
Ce qui est vérifié
- Garder le fond doré de l'affiche
- Poser un voile presque opaque sur l'encart principal
- Poser un voile léger sur l'encart discret
- Terminer chaque déclaration par un point-virgule
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)