Opacité

La propriété CSS opacity définit la transparence (appelée aussi opacité) d’un élément. Sa valeur varie entre 0.0 et 1.0. Plus la valeur est faible, plus l’élément est trasnparent.

Opacité au survol de la souris

opacity est fréquemment utilisée avec la pseudo-classe :hover afin de rendre un élément moins opaque au passage de la souris.

Exemple :

img:hover {
    opacity: 0.5; /* Lorsque la souris survole l'image, cette dernière est rendu moins opaque */
}

Transparence et héritage sur des éléments emboîtés

Lorsque opacity est utilisée pour rendre opaque l’arrière-plan d’un élément, tous les éléments enfants de cet élément héritent de cette opacité. Cela rend difficile le fait de lire le texte à l’intérieur d’un élément.

Exemple :

div {
    opacity: 0.5 /* Ici, la div et tous ses éléments enfants se voient appliquer une opacité de 0.5 */
}

Transparence avec RGBA