Fonction sepia
La fonction sepia permet
de créer un effet sépia sur une image d'arrière-plan -
une image en noir et blanc avec une teinte
brune. Une valeur de 0 signifie
que l'image reste inchangée.
Une valeur de 100% ou 1 transforme
complètement l'arrière-plan en sépia. Toute valeur comprise
dans cet intervalle applique l'effet sépia de manière linéaire.
Les valeurs négatives ne sont pas autorisées.
La valeur par défaut est 0.
Syntaxe
sélecteur {
filter: sepia(valeur);
}
Exemple
Créons un effet sépia complet sur notre image :
<div id="elem"></div>
#elem {
filter: sepia(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Exemple
Maintenant, réduisons l'effet sépia
à 50% :
<div id="elem"></div>
#elem {
filter: sepia(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Exemple
Maintenant, définissons la valeur
de la fonction sepia
sur 0 :
<div id="elem"></div>
#elem {
filter: sepia(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Voir aussi
-
la fonction
blur,
qui floute l'arrière-plan -
la fonction
brightness,
qui définit la luminosité de l'arrière-plan -
la fonction
contrast,
qui définit le contraste de l'arrière-plan -
la fonction
drop-shadow,
qui ajoute une ombre portée à l'arrière-plan -
la fonction
hue-rotate,
qui modifie la teinte de l'arrière-plan -
la fonction
invert,
qui inverse les couleurs de l'arrière-plan -
la fonction
opacity,
qui définit la transparence de l'arrière-plan -
la propriété
background,
qui est une propriété raccourcie pour l'arrière-plan -
la propriété
background-image,
qui permet de définir une image d'arrière-plan pour un élément -
la propriété
filter,
qui définit un style pour l'arrière-plan