invert()
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 invert() permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type <filter-function>.
Exemple interactif
filter: invert(0);
filter: invert(0.3);
filter: invert(50%);
filter: invert(70%);
filter: invert(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
invert(multiplicateur)
Paramètres
multiplicateur-
L'intensité de la conversion, indiquée sous la forme d'un nombre (
<number>) ou d'un pourcentage (<percentage>). Avec100%, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de0%ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est0.
Exemples
Exemples de valeurs correctes pour invert()
css
invert(0); /* Aucun effet */
invert(.6); /* Inversion à 60% */
invert(100%); /* Négatif de l'image originale */
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-invert |
Compatibilité des navigateurs
Loading…
Voir aussi
<filter-function>et les autres fonctions associées