La transparence de couleur avec RGBa en CSS3 Principe de la notation RGBa

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);
}

 

Autour du même sujet