Fonction invert() CSS

Définition et utilisation

CSS invert() Les fonctions de filtre sont utilisées pour inverser la couleur des images.

  • 100% (1) inversera complètement l'image
  • 0% (0) n'aura aucun effet

Exemple

Exemple 1

Inverser la couleur des images :

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Essayez-le vous-même

Exemple 2

transforment invert() et backdrop-filter Utilisation conjointe des propriétés :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Essayez-le vous-même

Syntaxe CSS

invert(amount)
Valeur Description
amount

Optionnel. Spécifiez l'ampleur de l'inversion, qui peut être un nombre ou un pourcentage.

100% (1) inversera complètement l'élément, 0% (0) représente l'image originale (sans effet).

La valeur par défaut est 0.

Détails techniques

Version : Module de effets de filtre CSS Level 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement la fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pages associées

Référence :Attribut filter CSS

Référence :Fonction blur() CSS

Référence :Fonction brightness() CSS

Référence :Fonction contrast() CSS

Référence :Fonction drop-shadow() CSS

Référence :Fonction grayscale() CSS

Référence :Fonction hue-rotate() CSS

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS