Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété opacity

Description de la propriété opacity.

La propriété opacity définit l'opacité d'un élément, c'est à dire son degré de transparence. Cette propriété permet de rendre un élément semi-transparent (ou complètement transparent).

Remarque : pour gérer l'opacité d'un arrière-plan, il est préférable d'appliquer à cet arrière-plan une couleur semi-transparente : avec la fonction rgba() ou un code de couleur à 8 digits. Voir les couleurs CSS.

La propriété opacity a ceci de particulier qu'elle s'applique à l'élément et à tous ses descendants. Mais ce n'est pas le mécanisme d'héritage habituel car on peut pas rétablir l'opacité initiale des éléments enfants.

Cette première image vous montre la construction de notre exemple : un premier bloc comporte une image de fond. Il contient le bloc bleu, qui lui même contient le bloc vert.
Ici aucune opacité n'a été définie : tous les blocs sont donc parfaitement opaques.
div id="exemple-fond" div id="exemple-bleu" div id="exemple-vert" /div /div /div
Ici l'opacité du bloc bleu a été réduite à 0.8. L'image de fond du bloc parent est donc légèrement visible à travers le bloc bleu. Elle est également visible à travers le bloc vert car l'opacité s'applique à l'élément bleu et à tous ses descendants.
Dans ce troisième échantillon, le bloc bleu à toujours une opacité de 0.8, et le bloc vert à une opacité demandée à 1. On voit que cela ne change rien : le bloc vert est toujours un peu transparent.
Ce n'est donc par le mécanisme habituel d'héritage qui est à l'œuvre.
Cette opacité récupérée du parent persiste même dans les parties qui débordent du parent, comme c'est le cas ici.

Valeurs pour opacity.

  • opacity: 0.5;

    L'opacité de l'élément sera de 50% (semi-transparent). La valeur par défaut est 1 (opacité totale).

  • opacity: initial;

    La valeur initiale est 1.

  • opacity: unset; opacity: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

opacity :

Effet de l'opacité sur du texte et sur une image

Exemple pour opacity


Quand l'opacité est définie sur un élément, tous les enfants sont concernés. Ici l'opacité du tableau est modifiée, on constate que l'opacité des cellules est également modifiée.

Lundi Mardi Mercredi

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.