contrast() - Fonction CSS
Résumé des caractéristiques de la fonction contrast()
100%
ne change pas le contraste.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.0
indique une réduction totale du contraste (une image grise).- Une valeur entre
0
et1
(ou entre0%
et100%
) indique une réduction du contraste. 1
ou100%
conserve le contraste initial de l'image.- Une valeur supérieure à
1
ou à100%
correspond à une augmentation du contraste. - Si aucune valeur n'est précisée, la valeur par défaut est
1
. - 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.
Simulateur : contrast()
utilisée avec filter
.
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.
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.
contrast()
.
contrast()
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.