Функция invert

La función invert permite invertir los colores en la imagen de fondo. El valor 0 indica que la imagen permanece original. El valor 100% o 1 invierte completamente los colores de fondo. Cualquier número ubicado en este rango invierte parcialmente los colores. No se puede establecer un valor negativo. Por defecto, el valor es 0.

Sintaxis

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

Ejemplo

Invertimos los colores de nuestra imagen a un valor de 50%:

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

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

Ejemplo

Ahora invertimos los colores de nuestra imagen a un valor de 100%:

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

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

Ejemplo

Ahora establezcamos en la función invert un valor igual a 0:

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

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

Véase también

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