Attributo filter di stile

Definizione e uso

filter Aggiungi effetti visivi alle immagini (come sfocatura e saturazione).

Vedi anche:

Manuale CSS:Attributo filter

Esempio

Cambia il colore dell'immagine in bianco e nero (100% grigio):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Prova a te stesso

Sintassi

Restituisce l'attributo filter:

oggetto.style.filter

Imposta l'attributo filter:

oggetto.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Funzione Filtro

注释：Anche i filtri utilizzati con valori percentuali (ad esempio 75%) accettano valori decimali (cioè 0.75).

Filtro Descrizione
none Riguarda l'assenza di effetto.
blur(px)

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

Se non viene specificato un valore, viene utilizzato 0.
brightness(%)

Regola la luminosità dell'immagine.

0% renderà l'immagine completamente nera.

100% (1) è il valore predefinito, 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.

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

Valori superiori al 100% forniranno risultati con bassa contrasto.
drop-shadow(h-shadow v-shadow blur spread color)

Applica un effetto proiettore all'immagine.

Valori possibili：

h-shadow - obbligatorio. Specifica il valore in pixel dell'ombra orizzontale. Un valore negativo metterà l'ombra a sinistra dell'immagine.

v-shadow - obbligatorio. Specifica il valore in pixel dell'ombra verticale. Un valore negativo metterà l'ombra sopra l'immagine.

blur - opzionale. Terzo valore, in unità di pixel. Aggiungi un effetto sfocatura all'ombra. Valori più grandi produrranno un'ombra più grande e più chiara. Non sono ammessi valori negativi. Se non specificato, sarà 0 (i margini dell'ombra saranno affilati).

spread - opzionale. Quarto valore, in unità di pixel. Un valore positivo farà aumentare l'ombra e renderla più grande, mentre un valore negativo la farà diventare più piccola. Se non specificato, sarà 0 (l'ombra sarà della stessa dimensione dell'elemento).

注释：Chrome, Safari e Opera, oltre a possibili altri browser, non supportano la quarta lunghezza; se aggiunta, non verrà visualizzata.

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

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

Converti l'immagine in scala di grigio.

0% (0) è il valore predefinito, che rappresenta l'immagine originale.

100% renderà l'immagine completamente grigia (usata per immagini nero e bianco).

注释：Non sono ammessi valori negativi.
hue-rotate(deg)

Applica una rotazione di tonalità all'immagine. Questo valore definisce i gradi di rotazione intorno al cerchio delle tonalità ai quali i campioni dell'immagine saranno regolati.

0deg è il valore predefinito, che rappresenta l'immagine originale.

注释：Il valore massimo è di 360 gradi.
invert(%)

Inverti i campioni dell'immagine.

0% (0) è il valore predefinito, che rappresenta l'immagine originale.

100% renderà l'immagine completamente invertita.

注释：Non sono ammessi valori negativi.
opacity(%)

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

0% è completamente trasparente.

100% (1) è il valore predefinito, che rappresenta l'immagine originale (nessuna trasparenza).

注释：Non sono ammessi valori negativi.

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

Regola la saturazione dell'immagine.

0% (0) renderà l'immagine completamente insatura.

100% è il valore predefinito, che rappresenta l'immagine originale.

Valori superiori al 100% forniranno risultati eccessivamente saturi.

注释：Non sono ammessi valori negativi.
sepia(%)

Converti l'immagine in marrone.

0% (0) è il valore predefinito, che rappresenta l'immagine originale.

100% farà sì che l'immagine diventi completamente marrone.

注释：Non sono ammessi valori negativi.

Dettagli tecnici

Versione CSS: CSS3

Supporto del browser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0