CSS - Fonction invert()

Description de la fonction invert().

La fonction invert() inverse les couleurs d'un élément : les tons sombres deviennent clairs et vice-versa. En appliquant une inversion totale (100%) on obtient donc le négatif de l'image originale.

La fonction invert() 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 invert().

• filter: invert(50%); n

  n est une valeur sans unité comprise entre 0 et 1 ou bien un pourcentage. Elle indique le taux d'inversion.
  0 correspond à une image non inversée, identique à l'originale.
  0.5 ou 50% donne une image grise.
  1 ou 100% correspond au négatif de l'image de départ.

Simulateur.

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.
• opacity() : Détermine le degré de transparence d'un élément.
• saturate() : Définit la saturation des couleurs d'une image.
• sepia() : Applique un effet sépia à une image.