Función contrast() de CSS

Definición y uso

CSS contrast() Las funciones de filtro se utilizan para ajustar el contraste del elemento.

  • 0% hace que la imagen se convierta completamente en gris
  • 100% (o 1) es el valor predeterminado, lo que representa la imagen original
  • Los valores superiores al 100% aumentan el contraste
  • Los valores inferiores al 100% reducen el contraste

Ejemplo

Ejemplo 1

Aumentar y reducir el contraste de la imagen:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Prueba por ti mismo

Ejemplo 2

para contrast() con backdrop-filter Uso combinado de atributos:

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

Prueba por ti mismo

Sintaxis de CSS

contrast(amount)
Valor Descripción
amount

Opcional. Especificar el valor de contraste, que puede ser un número o un porcentaje.

0% hace que el elemento se convierta completamente en gris.

100% (o 1) es el valor predeterminado, lo que representa la imagen original (sin efecto).

Los valores superiores al 100% aumentan el contraste, mientras que los valores inferiores al 100% reducen el contraste.

Detalles técnicos

Versión: Módulo de Efectos de Filtro de 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 filter de CSS

Referencia:Función blur() de CSS

Referencia:Función brightness() de CSS

Referencia:Función drop-shadow() de CSS

Referencia:Función grayscale() de CSS

Referencia:Función hue-rotate() de CSS

Referencia:Función invert() de CSS

Referencia:Función opacity() de CSS

Referencia:Función saturate() de CSS

Referencia:Función sepia() de CSS