Funzione sepia

La funzione sepia consente di creare un'immagine in seppia dallo sfondo - un'immagine in bianco e nero con una tonalità marrone. Il valore 0 indica che l'immagine rimarrà originale. Il valore 100% o 1 trasforma completamente lo sfondo in seppia. Qualsiasi numero compreso in questo intervallo applica la seppia in modo lineare. Non è possibile impostare valori negativi. Per impostazione predefinita, il valore è 0.

Sintassi

selettore {
	filter: sepia(numero);
}

Esempio

Creiamo un'immagine in seppia completa dalla nostra:

<div id="elem"></div>

#elem {
	filter: sepia(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Ora riduciamo l'applicazione della seppia al 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;
}

Esempio

Ora impostiamo il valore della funzione sepia uguale a 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;
}

Vedi anche

funzione blur,
che sfoca lo sfondo
funzione brightness,
che imposta la luminosità dello sfondo
funzione contrast,
che imposta il contrasto dello sfondo
funzione drop-shadow,
che aggiunge un'ombra allo sfondo
funzione hue-rotate,
che imposta la tonalità di colore dello sfondo
funzione invert,
che inverte i colori dello sfondo
funzione opacity,
che imposta la trasparenza dello sfondo
proprietà background,
che è una proprietà abbreviata per lo sfondo
proprietà background-image,
con cui è possibile impostare un'immagine di sfondo per un blocco
proprietà filter,
che imposta lo stile per lo sfondo