Функция sepia

La función sepia permite crear un efecto de sepia en una imagen de fondo - una imagen en blanco y negro con un tono marrón. Un valor de 0 significa que la imagen permanecerá original. Un valor de 100% o 1 convierte completamente el fondo en sepia. Cualquier número dentro de este rango aplica el efecto de sepia linealmente. No se puede establecer un valor negativo. Por defecto, el valor es 0.

Sintaxis

selector {
	filter: sepia(número);
}

Ejemplo

Hagamos que nuestra imagen sea completamente sepia:

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

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

Ejemplo

Ahora reduzcamos la aplicación del efecto sepia 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;
}

Ejemplo

Ahora establezcamos en la función sepia un valor igual 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;
}

Véase también

función blur,
que desenfoca el fondo
función brightness,
que establece el brillo del fondo
función contrast,
que establece el contraste del fondo
función drop-shadow,
que establece una sombra para el fondo
función hue-rotate,
que establece la tonalidad del fondo
función invert,
que invierte los colores del fondo
función opacity,
que establece la transparencia del fondo
propiedad background,
que es una propiedad abreviada para el fondo
propiedad background-image,
con la que se puede establecer una imagen de fondo para un bloque
propiedad filter,
que establece el estilo para el fondo