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
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 de0
ou0%
rend l'image complètement grise, tandis qu'une valeur de1
ou100%
laisse l'entrée inchangée. Les valeurs négatives ne sont pas autorisées. La valeur initiale pour l'interpolation est1
. La valeur par défaut est1
.
Voici des paires de valeurs équivalentes :
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>
.
.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.
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 :
<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 :
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
Loading…
Voir aussi
- Le module des effets de filtre CSS
- Les autres fonctions
<filter-function>
disponibles pour être utilisées dans les valeurs des propriétésfilter
etbackdrop-filter
incluent :