sepia()
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 sepia() convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type <filter-function>.
Exemple interactif
filter: sepia(0);
filter: sepia(0.2);
filter: sepia(60%);
filter: sepia(1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Syntaxe
css
sepia(multiplicateur)
Paramètres
multiplicateur-
L'intensité de la conversion indiquée sous la forme d'un nombre (
<number>) ou d'un pourcentage (<percentage>). Une valeur de100%permettra d'obtenir une image complètement sépia tandis qu'une valeur de0%laissera l'image inchangée. Les valeurs entre0%et100%représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera0.
Exemples
Exemples de valeurs correctes pour sepia()
css
sepia(0); /* Aucun effet */
sepia(.65); /* 65% de sépia */
sepia(100%); /* Complètement sépia */
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-sepia |
Compatibilité des navigateurs
Loading…
Voir aussi
<filter-function>et les autres fonctions associées