Recommandation de cours :

Fonction contrast() CSS

Définition et utilisation de contrast() Les fonctions de filtre sont utilisées pour ajuster la contraste de l'élément.

  • 0% rend l'image complètement grise
  • 100% (ou 1) est la valeur par défaut, ce qui signifie l'image originale
  • Les valeurs supérieures à 100% augmentent la contraste
  • Les valeurs inférieures à 100% diminuent la contraste

Exemple

Exemple 1

Augmenter et diminuer la contraste des images :

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Essayez-le vous-même

Exemple 2

permet de contrast() et backdrop-filter Utilisation combinée des attributs :

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

Essayez-le vous-même

Syntaxe CSS

contrast(amount)
Valeur Description
amount

Optionnel. Spécifiez la valeur de contraste, qui peut être un nombre ou un pourcentage.

0% rend l'élément complètement gris.

100% (ou 1) est la valeur par défaut, ce qui signifie l'image originale (sans effet).

Les valeurs supérieures à 100% augmentent la contraste, tandis que les valeurs inférieures à 100% diminuent la contraste.

Détails techniques

Version : Module de effets de filtrage CSS niveau 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge complètement cette 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 drop-shadow() CSS

Référence :Fonction grayscale() CSS

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

Référence :Fonction invert() CSS

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS