Funzione CSS saturate()

Definizione e utilizzo

CSS saturate() Le funzioni di filtro possono regolare la saturazione dell'elemento (intensità del colore).

  • 0% (o 0) renderà l'elemento completamente desaturato
  • 100% (o 1) non avrà alcun effetto
  • 200% (o 2) renderà l'elemento super-saturato

Esempio

Esempio 1

Impostare diverse saturazioni per le immagini:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

Prova tu stesso

Esempio 2

per saturate() e backdrop-filter Utilizzo combinato degli attributi:

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

Prova tu stesso

Sintassi CSS

saturate(amount)
Valore Descrizione
amount

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

0% (o 0) renderà l'elemento completamente desaturato.

100% (o 1) rappresenta l'effetto nullo.

Valori superiori al 100% forniscono un effetto super-saturato.

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 CSS blur()

Riferimento:Funzione CSS brightness()

Riferimento:Funzione CSS contrast()

Riferimento:Funzione CSS drop-shadow()

Riferimento:Funzione CSS grayscale()

Riferimento:Funzione CSS hue-rotate()

Riferimento:Funzione CSS invert()

Riferimento:Funzione CSS opacity()

Riferimento:Funzione CSS sepia()