Функция 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