Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

contrast()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septembre 2016⁩.

La fonction CSS contrast() permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: contrast(1);
filter: contrast(1.75);
filter: contrast(50%);
filter: contrast(0);
<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css
contrast(amount)

Valeurs

amount Facultatif

Contraste du résultat, indiqué sous la forme d'un nombre (<number>) ou d'un pourcentage (<percentage>). Une valeur inférieure à 100% diminue le contraste, tandis qu'une valeur supérieure à 100% l'augmente. Une valeur de 0 ou 0% rend l'image complètement grise, tandis qu'une valeur de 1 ou 100% laisse l'entrée inchangée. Les valeurs négatives ne sont pas autorisées. La valeur initiale pour l'interpolation est 1. La valeur par défaut est 1.

Voici des paires de valeurs équivalentes :

css
contrast(0)    /* Complètement gris */
contrast(0%)

contrast(0.65) /* 65% de contraste */
contrast(65%)

contrast()     /* Aucun effet */
contrast(1)
contrast(100%)

contrast(2)    /* Double le contraste */
contrast(200%)

Syntaxe formelle

<contrast()> = 
contrast( [ <number> | <percentage> ]? )

Exemples

Avec la propriété backdrop-filter

Cet exemple applique un filtre contrast() via la propriété CSS backdrop-filter au paragraphe et au texte à chasse fixe, modifiant les couleurs de la zone derrière les éléments <p> et <code>.

css
.container {
  background: url("unity_for_the_people.jpg") no-repeat center / contain #333399;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}

Avec la propriété filter

Cet exemple applique un filtre contrast() via la propriété CSS filter, modifiant le contraste en ajustant les couleurs de l'ensemble de l'élément, y compris le contenu, la bordure, l'arrière-plan et les ombres.

css
p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

Avec url() et un filtre SVG contrast

L'élément SVG <filter> permet de définir des effets de filtre personnalisés qui peuvent ensuite être référencés par id. La primitive <feComponentTransfer> du filtre permet un remappage des couleurs au niveau du pixel. Exemple :

html
<svg
  xmlns="http://www.w3.org/2000/svg"
  id="svg"
  viewBox="0 0 240 151"
  height="0"
  width="0"
  overflow="visible"
  color-interpolation-filters="sRGB">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5" />
      <feFuncG type="linear" slope="2" intercept="-0.5" />
      <feFuncB type="linear" slope="2" intercept="-0.5" />
    </feComponentTransfer>
  </filter>
</svg>

Ces valeurs produisent le même résultat :

css
filter: contrast(200%);
filter: url("#contrast"); /* avec SVG intégré */
filter: url("folder/fileName.svg#contrast"); /* définition du filtre SVG externe */

Cet exemple montre trois images : l'image avec la fonction de filtre contrast() appliquée, l'image avec un filtre url() équivalent, et l'image originale pour comparaison :

Spécifications

Specification
Filter Effects Module Level 1
# funcdef-filter-contrast

Compatibilité des navigateurs

Voir aussi