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

cssselettore {
  filter: sepia(numero);
}

Esempio

Creiamo un'immagine in seppia completa dalla nostra:

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

css#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%:

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

css#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:

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

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

Результат:

Vedi anche