Proprietà filter CSS

Definizione e uso

La proprietà filter definisce l'effetto visivo dell'elemento (solitamente <img>) come sfocatura e saturazione.

Vedi anche:

Tutorial CSS:Immagini CSS

Manuale di riferimento HTML DOM:Proprietà filter

Esempio

Rendi tutte le immagini in bianco e nero (100% grigio):

img {
  filter: grayscale(100%);
}

Prova tu stesso

Suggerimento:Puoi trovare più esempi TIY nella parte inferiore della pagina.

Sintassi CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Suggerimento:Per utilizzare più filtri, separali con uno spazio (vedi altri esempi nella parte inferiore della pagina).

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Produzione di animazioni: Supporto. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.filter="grayscale(100%)"

Filtro funzione

Nota:Utilizza valori percentuali (ad esempio 75%) per i filtri, accetta anche che il valore sia decimale (ad esempio 0.75).

Filtro Descrizione
none Valore predefinito. Specifica l'assenza di effetto.
blur(px)

Applica un effetto sfocatura all'immagine. Valori più grandi producono più sfocatura.

Se specificato un valore, utilizzare 0.
brightness(%)

Regola la luminosità dell'immagine.

  • 0% renderà l'immagine completamente nera.
  • Il valore predefinito è 100%, che rappresenta l'immagine originale.
  • Valori superiori al 100% forniranno risultati più luminosi.
contrast(%)

Regola la contrasto dell'immagine.

  • 0% renderà l'immagine completamente nera.
  • Il valore predefinito è 100%, che rappresenta l'immagine originale.
  • Valori superiori al 100% forniranno risultati con maggiore contrasto.
drop-shadow(h-shadow v-shadow blur spread color)

Applica un effetto ombra all'immagine.

Valori possibili:

  • h-shadow - obbligatorio. Specifica il valore in pixel della ombra orizzontale. Un valore negativo posizionerà l'ombra a sinistra dell'immagine.
  • v-shadow - obbligatorio. Specifica il valore in pixel della ombra verticale. Un valore negativo posizionerà l'ombra sopra l'immagine.

blur - opzionale. Questo è il terzo valore, l'unità deve essere in pixel. Aggiunge un effetto sfocatura all'ombra. Più grande è il valore, più sfocatura viene creata (l'ombra diventa più grande e più chiara). Non sono ammessi valori negativi. Se non specificato, verrà utilizzato 0 (i margini dell'ombra saranno molto definiti).

spread - opzionale. Questo è il quarto valore, l'unità deve essere in pixel. Un valore positivo farà estendere l'ombra e aumentare la sua dimensione, mentre un valore negativo farà diminuire l'ombra. Se non specificato, verrà utilizzato 0 (l'ombra sarà della stessa dimensione dell'elemento).

Nota:Chrome, Safari e Opera, forse anche altri browser, non supportano la quarta lunghezza; se aggiunta, non verrà visualizzata.

color - opzionale. Aggiunge un colore all'ombra. Se non specificato, il colore dipende dal browser (solitamente nero).

Questo esempio crea una ombra rossa, con una dimensione orizzontale e verticale di 8px e un effetto sfocatura di 10px:

filter: drop-shadow(8px 8px 10px red);

Suggerimento:Questo filtro è simile all'attributo box-shadow.
grayscale(%%);

Converti l'immagine in scala di grigio.

  • 0% (0) è il valore predefinito, rappresenta l'immagine originale.
  • 100％ renderà l'immagine completamente grigia (usata per immagini nero e bianco).

Nota:Non sono ammessi valori negativi.
hue-rotate(deg);

Applica una rotazione di tonalità di colore all'immagine. Questo valore definisce i gradi del cerchio delle tonalità. Il valore predefinito è 0deg, che rappresenta l'immagine originale.

Nota:Il valore massimo è 360deg.
invert(%%);

Inverti i campioni nell'immagine.

  • 0% (0) è il valore predefinito, rappresenta l'immagine originale.
  • 100％ renderà l'immagine completamente invertita.

Nota:Non sono ammessi valori negativi.
opacity(%%);

Imposta il livello di opacità dell'immagine. Il livello di opacità opacity-level descrive il livello di trasparenza, dove:

  • 0% è completamente trasparente.
  • 100% (1) è il valore predefinito, rappresenta l'immagine originale (opaca).

Nota:Non sono ammessi valori negativi.

Suggerimento:Questo filtro è simile all'attributo opacity.
saturate(%%);

Imposta la saturazione dell'immagine.

  • 0% (0) renderà l'immagine completamente insatura.
  • 100% è il valore predefinito e rappresenta l'immagine originale.
  • Valori superiori al 100% forniscono risultati super-saturati.

Nota:Non sono ammessi valori negativi.
sepia(%%);

Converti l'immagine in bruna.

  • 0% (0) è il valore predefinito, rappresenta l'immagine originale.
  • 100％ renderà l'immagine completamente bruna.

Nota:Non sono ammessi valori negativi.
url();

La funzione url() accetta l'indirizzo del file XML del filtro SVG e può includere un锚aggio verso l'elemento filtro specifico. Esempio:

filter: url(svg-url#element-id);
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Altri esempi

Esempio sfocatura

Aggiungi un effetto sfocatura all'immagine:

img {
  filter: blur(5px);
}

Prova tu stesso

Esempio sfocatura 2

Applica un'immagine di sfondo sfocata:

img.background {
  filter: blur(35px);
}

Prova tu stesso

Esempio di luminosità

Regola la luminosità dell'immagine:

img {
  filter: brightness(200%);
}

Prova tu stesso

Esempio di contrasto

Regola la contrasto dell'immagine:

img {
  filter: contrast(200%);
}

Prova tu stesso

Esempio di ombra

Applica un'ombra all'immagine:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Prova tu stesso

Esempio di scala di grigio

Converti l'immagine in scala di grigio:

img {
  filter: grayscale(50%);
}

Prova tu stesso

Esempio di rotazione di tonalità di colore

Applica una rotazione di tonalità di colore all'immagine:

img {
  filter: hue-rotate(90deg);
}

Prova tu stesso

Esempio di inversione

Inverti i campioni nell'immagine:

img {
  filter: invert(100%);
}

Prova tu stesso

Esempio di opacità

Imposta il livello di opacità dell'immagine:

img {
  filter: opacity(30%);
}

Prova tu stesso

Esempio di saturazione

Regola la saturazione dell'immagine:

img {
  filter: saturate(800%);
}

Prova tu stesso

Esempio di tonalità marrone

Converti l'immagine in tonalità marrone:

img {
  filter: sepia(100%);
}

Prova tu stesso

Uso di filtri multipli

Per utilizzare più filtri, separare ogni filtro con uno spazio. Si prega di notare che l'ordine è importante (ad esempio, l'uso di grayscale() dopo sepia() produrrà un'immagine completamente grigia):

img {
  filter: contrast(200%) brightness(150%);
}

Prova tu stesso

Tutti i filtri

Mostra tutte le funzioni di filtro:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Prova tu stesso

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

I numeri con -webkit- rappresentano la versione iniziale che utilizza il prefisso.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Nota:Le versioni più vecchie di Internet Explorer (da 4.0 a 8.0) supportano il proprietario non standard "filter" attributo. Quando è necessario il supporto per IE8 e versioni precedenti, viene utilizzato principalmente per l'opacità.