Funzione contrast() CSS

Definizione e utilizzo

CSS contrast() Le funzioni di filtro vengono utilizzate per regolare la contrasto degli elementi.

  • 0% rende l'immagine completamente grigia
  • 100% (o 1) è il valore predefinito, che rappresenta l'immagine originale
  • Valori superiori al 100% aumentano la contrasto
  • Valori inferiori al 100% riducono la contrasto

Esempio

Esempio 1

Aumenta e riduci la contrasto dell'immagine:

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

Prova tu stesso

Esempio 2

per contrast() con backdrop-filter Combina l'uso degli attributi:

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;
}

Prova tu stesso

Sintassi CSS

contrast(amount)
Valore Descrizione
amount

Opzionale. Specificare il valore di contrasto, che può essere un numero o una percentuale.

0% rende l'elemento completamente grigio.

100% (o 1) è il valore predefinito, che rappresenta l'immagine originale (nessun effetto).

Valori superiori al 100% aumentano la contrasto, valori inferiori al 100% riducono la contrasto.

Dettagli tecnici

Versione: Modulo degli Effetti di Filtro CSS Livello 1

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pagina correlata

Riferimento:Proprietà filter CSS

Riferimento:Funzione blur() CSS

Riferimento:Funzione brightness() CSS

Riferimento:Funzione drop-shadow() CSS

Riferimento:Funzione grayscale() CSS

Riferimento:Funzione hue-rotate() CSS

Riferimento:Funzione invert() CSS

Riferimento:Funzione opacity() CSS

Riferimento:Funzione CSS saturate()

Riferimento:Funzione CSS sepia()