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