Función invert() CSS

Definición y uso

CSS invert() La función de filtro se utiliza para invertir el color de la imagen.

  • 100% (1) invierte completamente la imagen
  • 0% (0) no tendrá ningún efecto

Ejemplo

Ejemplo 1

Invierte el color de la imagen:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Prueba tú mismo

Ejemplo 2

transforma invert() con backdrop-filter Uso conjunto de propiedades:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Prueba tú mismo

Sintaxis CSS

invert(amount)
Valor Descripción
amount

Opcional. Especifica el grado de inversión, puede ser un número o un porcentaje.

100% (1) invierte completamente el elemento, 0% (0) representa la imagen original (sin efecto).

El valor predeterminado es 0.

Detalles técnicos

Versión: Módulo de Efectos de Filtro CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Páginas relacionadas

Referencia:Atributo CSS filter

Referencia:Función CSS blur()

Referencia:Función CSS brightness()

Referencia:Función CSS contrast()

Referencia:Función CSS drop-shadow()

Referencia:Función CSS grayscale()

Referencia:Función CSS hue-rotate()

Referencia:Función CSS opacity()

Referencia:Función CSS saturate()

Referencia:Función sepia() de CSS