Invert() - Fonction CSS

invert()

Résumé des caractéristiques de la fonction invert()

Description rapide
Inverse les couleurs d'un élément (filtre graphique).
Statut
Standard
Pourcentages
100% correspond à une inversion complète des couleurs.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

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. Une inversion de 50% donnera une image totalement grise.

La valeur invert() peut être utilisée avec les propriétés suivantes :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
  • filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction invert().

  • filter: invert(75%); 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.

    Les valeurs négatives sont interdites.

    Si aucune valeur n'est indiquée, la syntaxe est équivalente à invert(100%).

Simulateur avec la fonction invert()

filter :
Démo pour la fonction invert()

Support de la fonction invert().

La fonction invert() est bien reconnue par les navigateurs, comme toutes les autres fonctions de filtre graphique, sauf par Internet Explorer  , mais ce navigateur n'est plus utilisé.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support par les navigateurs de la fonction invert(), qui utilisée avec la propriété filter, inverse les couleurs d'un élément (crée un négatif).
1
Filtres
graphiques
2
Fonction
invert()
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction invert().

Voir aussi : autres effets et filtres graphiques.

Les fonctions de filtres graphiques comme invert() sont décrites dans la spécification du W3C Filter Effects Module. Voici la liste de ces fonctions et des propriétés qui permettent de les mettre en œuvre.

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
brightness()
Ajuste la luminosité d'un élément (filtre graphique).
contrast()
Ajuste le contraste d'un élément (filtre graphique).
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).
grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
opacity()
Détermine le degré de transparence d'un élément (filtre graphique).
saturate()
Définit la saturation des couleurs d'un élément (filtre graphique).
sepia()
Applique un effet sépia à un élément (filtre graphique).