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 - Fonction opacity()

Description de la fonction opacity().

La fonction opacity() détermine le degré de transparence d'un élément.
Note : il existe également une propriété opacity qui a le même rôle. Mais la propriété n'accepte que des valeurs entre 0 et 1, alors que la fonction opacity() accepte également des pourcentages.

La transparence est appliquée à l'élément et à tous ses enfants. ce n'est pas le mécanisme d'héritage habituel, car même si on fixe à 1 l'opacité des enfants, ils auront tout de même la transparence définie pour le parent.

La fonction opacity() peut être utilisée avec :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Filtre graphique.

Syntaxe de la fonction opacity().

  • filter: opacity(50%); v

    v est soit valeur sans unité entre 0 et 1, soit un pourcentage. Les valeurs négatives ne sont pas autorisées.
    v est le niveau d'opacité de l'élément : O définit un élément totalement transparent, donc invisible, tandis que 1 ou 1O0% définit un élément totalement opaque.

Simulateur.

filter:
( v )

Compatibilité et prise en charge par les navigateurs.

L'opacité (ou la transparence) des éléments est très bien traitée par les navigateurs actuels.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.