Esempio
Cambiare il colore di un'immagine in bianco e nero (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Prova tu stesso " Definizione e l'utilizzo
La proprietà filtro aggiunge effetti visivi (like blur and saturation) alle immagini.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da Webkit specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| filter | 18,0 Webkit | 13,0 | 35.0 | 6.0 Webkit | 15.0 Webkit |
Nota: Chrome, Safari e Opera sostengono in alternativa, la proprietà WebkitFilter.
Sintassi
Restituire la proprietà del filtro:
object .style.filterImpostare la proprietà di filtro:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Funzioni di filtro
Nota: I filtri che utilizzano valori percentuali (ie 75%) , anche accettare il valore come decimale (ie 0.75) .
| Filtro | Descrizione |
|---|---|
| nessuna | Specifica nessun effetto |
| blur( px ) | Applica un effetto di sfocatura all'immagine. Un valore maggiore creerà più sfocatura. Se non viene specificato alcun valore, viene utilizzato 0. |
| brightness( % ) | Regola la luminosità dell'immagine. 0% renderà l'immagine completamente nera. 100% (1) è predefinita e rappresenta l'immagine originale. Valori superiori a 100% forniranno risultati più brillanti. |
| contrast( % ) | Regola il contrasto dell'immagine. 0% renderà l'immagine completamente nera. 100% (1) è predefinita e rappresenta l'immagine originale. Valori superiori a 100% fornirà risultati con meno contrasto. |
| drop- shadow( h-shadow v-shadow blur spread color ) | Applica un effetto ombra all'immagine. Valori possibili: h-shadow - Richiesto. Specifica un valore di pixel per l'ombra orizzontale. Valori negativi collocano l'ombra a sinistra dell'immagine. v-shadow - Richiesto. Specifica un valore di pixel per l'ombra verticale. I valori negativi spostano l'ombra sopra l'immagine. sfocatura - opzionale. Questo è il terzo valore, e deve essere in pixel. Aggiunge un effetto di sfocatura all'ombra. Un valore maggiore creerà più sfocatura (l'ombra diventa più grande e più leggero). I valori negativi non sono ammessi. Se non viene specificato alcun valore, viene utilizzato 0 (bordo dell'ombra è taglienti). diffusione - opzionale. Questo è il quarto valore, e deve essere in pixel. I valori positivi causeranno l'ombra di espandersi e crescere più grande, e valori negativi causerà l'ombra a ridursi. Se non specificato, sarà 0 (the shadow will be the same size as the element) . Nota: Chrome, Safari e Opera, e forse altri browser, non supportano questa quarta lunghezza; non renderà se aggiunto. Colore: facoltativo. Aggiunge un colore per l'ombra. Se non specificato, il colore dipende dal browser (often black) . Suggerimento: Questo filtro è simile al box-shadow proprietà. |
| grayscale( % ) | Converte l'immagine in scala di grigi. 0% (0) è predefinita e rappresenta l'immagine originale. 100% renderà l'immagine completamente grigio (used for black and white images) . Nota: I valori negativi non sono ammessi. |
| hue- rotate( deg ) | Si applica una rotazione tonalità sull'immagine. Il valore definisce il numero di gradi intorno al cerchio colore vengono regolati i campioni dell'immagine. 0deg è di default, e rappresenta l'immagine originale. Nota: Il valore massimo è 360deg. |
| invert( % ) | Inverte i campioni nell'immagine. 0% (0) è predefinita e rappresenta l'immagine originale. 100% renderà l'immagine completamente capovolto. Nota: I valori negativi non sono ammessi. |
| opacity( % ) | Imposta il livello di opacità per l'immagine. Il livello di opacità descrive il livello di trasparenza, in cui: 0% è completamente trasparente. 100% (1) è di default e rappresenta l'immagine originale (no transparency) . Nota: I valori negativi non sono ammessi. Suggerimento: Questo filtro è simile a l'opacità proprietà. |
| saturate( % ) | Satura l'immagine. 0% (0) renderà l'immagine completamente non-satura. 100% è predefinita e rappresenta l'immagine originale. Valori superiori a 100% fornisce risultati super saturo. Nota: I valori negativi non sono ammessi. |
| sepia( % ) | Converte l'immagine in seppia. 0% (0) è predefinita e rappresenta l'immagine originale. 100% renderà l'immagine completamente seppia. Nota: I valori negativi non sono ammessi. |
Dettagli tecnici
| CSS Version | CSS3 |
|---|
Pagine correlate
Di riferimento CSS: filter property
<Stile di oggetto