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 :

contrast() - Fonction CSS

contrast()

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

Description rapide
Ajuste le contraste d'une image.
Statut
Standard
Pourcentages
Calculés par rapport au contraste original, autrement dit la valeur 100% ne change pas le contraste.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document:: WD (document de travail)

Description de la fonction contrast().

La fonction contrast() modifie le contraste d'une image, ou plus généralement d'un élément quelconque. Le contraste étant l'écart de luminosité entre les tons sombres et les tons clairs. Le contraste peut être augmenté ou réduit suivant la valeur du paramètre donné à la fonction.

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

  • filter: contrast(50%); n

    n indique l'importance du changement de contraste.
    C'est une valeur numérique positive sans unité ou un pourcentage.

    1. 0 indique une réduction totale du contraste (une image grise).
    2. Une valeur entre 0 et 1 (ou entre 0% et 100%) indique une réduction du contraste.
    3. 1 ou 100% conserve le contraste initial de l'image.
    4. Une valeur supérieure à 1 ou à 100% correspond à une augmentation du contraste.
    5. Si aucune valeur n'est précisée, la valeur par défaut est 1.
    6. Les valeurs négatives sont interdites.

Animation d'un filtre avec la fonction contrast().

Lorsque la valeur du contraste est baissée jusqu'à 0, l'élément est totalement gris. Nous avons utilisé cette particularité pour faire disparaître et apparaître le texte de l'élément ci-dessous.

Coucou

Simulateur : contrast() utilisée avec filter.

filter :
Ajustement du contraste

Simulateur : contrast() utilisée avec backdrop-filter.

Le texte ci-dessous et bien plus facile à lire lorsque le contraste de l'arrière-plan est réduit.

backdrop-filter :
Ajustement du contraste
Amélioration de la lisibilité en
réduisant le contraste de l'arrière-plan

Prise en charge par les navigateurs (compatibilité).

La fonction contrast() est, à l'heure actuelle, bien prise en charge par les navigateurs. Il en est de même pour les autres filtres et effets graphiques.

Colonne 1
Prise en charge des filtres graphiques.
Colonne 2
Prise en charge de la fonction CSS contrast().
1
Graphic filters
2
contrast()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
96%

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 contrast().

Les spécifications CSS éditées par le W3C sont organisées en modules. contrast() 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.
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).
Inverse les couleurs d'une image.
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.