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 :

invert() - Fonction CSS

invert()

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

Description rapide
Inverse les couleurs d'une image.
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 fonction invert() peut être utilisée avec :

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

Syntaxe 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.

filter :
Démo pour la fonction invert()

Prise en charge de invert() par les navigateurs (compatibilité).

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
Traitement des filtres graphique en général.
Colonne 2
Compatibilité avec la fonction CSS invert().
1
Graphic filters
2
invert()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que invert().

Les spécifications CSS éditées par le W3C sont organisées en modules. invert() fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Applique un filtre graphique sur l'élément situé en arrière plan.
Définit dans quel espace de couleurs sont calculés les effets de filtrage.
Applique un filtre graphique (flou, contraste...) à un élément.

Fonctions.

Applique un effet de flou.
Ajuste la luminosité d'un élément.
Ajuste le contraste d'une image.
Définit l'ombre d'un élément (dimensions, flou, couleur).
Convertit une image en nuances de gris (noir et blanc).
Change les couleurs d'une image (rotation des teintes).
Détermine le degré de transparence d'un élément.
Définit la saturation des couleurs d'une image.
Applique un effet sépia à une image.