La transparence de couleur avec RGBa en CSS3 Principe de transparence RGBa versus propriété d'opacité

Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa.

Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML.

RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement

Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.

De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.

Voici une illustration du principe de transparence de la couche Alpha (RGBa) :

 div { 
 background-color: rgba(0, 0, 255, 0.5); 
} 

Et voici une illustration du principe d'opacité (opacity) sur un élément :

 div { 
 opacity: 0.5; 
}