Même principe que la notation RGB
La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0). La dernière valeur indiquant le degré d'opacité entre 0 et 1.
Illustrons cette notation sur une structure HTML, l'objectif étant d'appliquer une transparence de 50% sur la couleur d'arrière-plan de l'élément <div>
<div>
<h1>Joli titre</h1>
</div>
Voici les styles CSS permettant d'appliquer cette transparence :
div {
background-color: rgba(0, 0, 255, 0.5); /* un arrière plan bleu à 50% de transparence */
}
div h1 {
color: rgb(255, 200, 0); /* une couleur de texte jaune-orange */
}
Commencer par déclarer une couleur de fond solide en RGB
Pour s'assurer qu'il y ait une alternative pour les mauvais élèves ou les navigateurs plus anciens, il est possible de commencer par déclarer une couleur de fond solide à l'aide de l'écriture classique RGB.
Les anciens navigateurs, pour la plupart, ne reconnaîtront pas la seconde valeur et se contenteront de la première déclaration :
div {
background-color: rgb(0, 0, 255);
background-color: rgba(0, 0, 255, 0.5);
}
