filtro CSS3 (filtro) proprietà
Esempi
Modifica tutti i colori alle immagini in bianco e nero (100% grigio):
-webkit-filtro: in scala di grigi (100% ); / * Chrome, Safari, Opera * /
Filtro: in scala di grigi (100%);
}
Prova »
Definizioni e uso
attributo di filtro definisce gli elementi (tipicamente <img>) effetti visivi (ad esempio: Fuzzy e saturazione).
| predefinito: | nessuno |
|---|---|
| ereditarietà: | no |
| il supporto di animazione: | Sì. I dettagli possono essere trovati in CSS Animation |
| versione: | CSS3 |
| sintassi JavaScript: | object .style.WebkitFilter = "scala di grigi (100%)" per provare >> |
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione metodo.
Subito dopo il numero del prefisso il browser specificato -webkit-.
| proprietà | |||||
|---|---|---|---|---|---|
| filtro | 18,0 -webkit- | Non supporta | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
Nota: Più browser Internet Explorer (4,0-8,0) per supportare non standard "filtro" proprietà è stata abbandonata. IE8 e browser precedenti spesso utilizzano l'opacità di proprietà.
CSS Sintassi
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Suggerimento: Usa gli spazi per separare più filtri.
funzione di filtro
Nota: Filtri tipicamente utilizzano percentuale (es: 75%), naturalmente, può anche essere utilizzato per rappresentare un decimale (es: 0,75).
| filtro | descrizione |
|---|---|
| nessuno | Il valore predefinito, nessun effetto. |
| sfocatura (px) | sfocatura gaussiana alle impostazioni dell'immagine. "Raggio" per impostare un valore funzione gaussiana standard è scarsa, o il numero di pixel sullo schermo di fondere insieme, quindi maggiore è il valore più offuscata; Se il valore non è impostato, il valore predefinito è 0, questo parametro può essere impostato valore di lunghezza CSS, ma non accetta valori percentuali. |
| luminosità (%) | L'applicazione di una moltiplicazione lineare per la foto per far sembrare più chiaro o più scuro. Se il valore è 0%, l'immagine è tutto nero. Il valore è 100%, nessun cambiamento nell'immagine. Altri valori corrispondono a lineare effetto moltiplicatore. Valore superiore al 100% sono possibili, l'immagine sarà più luminosa rispetto all'originale. Se il valore non è impostato, il valore predefinito è 1. |
| contrasto (%) | Regolare il contrasto dell'immagine. Il valore è 0%, l'immagine è tutto nero. Il valore è 100%, l'immagine non modificata. I valori possono superare il 100%, il che significa che userà un contrasto più basso. Se il valore non è impostato, il valore predefinito è 1. |
| drop-ombra (h-ombra v -Ombre sfocatura colore steso) | Impostare un effetto ombra per l'immagine. Le ombre sono sintetizzati nell'immagine qui sotto, ci può essere ambiguità, un colore specifico può disegnare la maschera schema versione offset. Funzione accetta <ombra> valore (definito in background CSS3) tipo, oltre a "inserto" parola chiave non è permesso. La funzione con la proprietà box-shadow esistente box-shadow è molto simile, se non che, attraverso il filtro, alcuni browser per migliorare le prestazioni fornisce accelerazione hardware.
|
| in scala di grigi (%) | Convertire l'immagine in scala di grigi. Definisce il valore del rapporto di conversione. Valore del 100% è completamente convertito in una scala di grigi, un valore di 0% dell'immagine invariato. Valori tra 0% e 100%, l'effetto moltiplicatore è lineare. Se non è impostata, il valore di default è 0; |
| Hue-rotazione (gradi) | Applicazione per la rotazione dell'immagine tonalità. immagine "Angolo" angolo di anello di colore è un valore valore impostato regolato. Valore 0deg, il cambiamento dell'immagine. Se il valore non è impostato, il valore predefinito è 0deg. Anche se non esiste un valore massimo che supera il valore dell'equivalente di un'altra 360deg perimetro. |
| invertire (%) | immagine in ingresso Inversione. Definisce il valore del rapporto di conversione. 100% del valore viene completamente rovesciata. Un valore di 0%, l'immagine non modificata. Un valore compreso tra 0% e 100%, l'effetto moltiplicatore è lineare. Se il valore non è impostato, il valore di default è 0. |
| opacità (%) | grado di conversione della trasparenza dell'immagine. Definisce il valore del rapporto di conversione. 0% è completamente trasparente, e un valore di 100%, l'immagine non modificata. Un valore compreso tra 0% e 100%, l'effetto è moltiplicatore lineare, moltiplicato per il numero di campioni è equivalente all'immagine. Se il valore non è impostato, il valore predefinito è 1. Questa funzione è molto simile alla proprietà di opacità esistente, tranne che attraverso il filtro, al fine di migliorare le prestazioni di alcuni browser fornirà accelerazione hardware. |
| saturare (%) | Converte la saturazione dell'immagine. Definisce il valore del rapporto di conversione. 0% è completamente insaturo, nessun cambiamento nell'immagine è 100%. Altro valore, l'effetto moltiplicatore è lineare. Più è consentito il 100% del valore, vi è una saturazione più elevata. Se il valore non è impostato, il valore predefinito è 1. |
| seppia (%) | Convertire l'immagine di seppia. Definisce il valore del rapporto di conversione. Valore del 100% è completamente marrone scuro, è 0% dell'immagine invariato. Valori tra 0% e 100%, l'effetto moltiplicatore è lineare. Se non è impostata, il valore di default è 0; |
| url () | Funzione URL prende un file XML, che imposta un filtro SVG, e può includere un'ancora per specificare un elemento di filtro specifico. Ad esempio: filter: url(svg-url#element-id) |
| iniziale | La proprietà è impostata su valori di default, consultare: CSS parola chiave iniziale |
| ereditare | Questa proprietà viene ereditata dall'elemento genitore, è possibile vedere: il CSS la parola chiave Eredita |
Altri esempi
Esempi di Fuzzy
Foto sfocatura gaussiana:
-webkit-filtro: sfocatura (5px) ; / * Chrome, Safari, Opera * /
Filtro: sfocatura (5px);
}
Prova »
Luminosità istanza Funzione
Rendere più luminosa immagine:
-webkit-filtro: luminosità (200% ); / * Chrome, Safari, Opera * /
Filtro: luminosità (200%);
}
Prova »
Contrasto Istanza funzione
Regolare il contrasto dell'immagine:
-webkit-filtro: il contrasto (200% ); / * Chrome, Safari, Opera * /
Filtro: contrasto (200%);
}
Prova »
esempi di funzioni drop-ombra
Impostare un effetto ombra per l'immagine:
-webkit-filtro: drop-ombra ( 8px 8px 10px rosso); / * Chrome, Safari, Opera * /
Filtro: drop-ombra (8px 8px 10px rosso);
}
Prova »
Scala di grigi istanza Funzione
Convertire l'immagine in scala di grigi:
-webkit-filtro: in scala di grigi (50% ); / * Chrome, Safari, Opera * /
Filtro: in scala di grigi (50%);
}
Prova »
() esempi di funzione tonalità rotazione
Le domande di rotazione tonalità all'immagine:
-webkit-filtro: Hue-rotazione ( 90?); / * Chrome, Safari, Opera * /
Filtro: tonalità-rotazione (90?) ;
}
Prova »
Inverti istanza Funzione
immagine in ingresso Inversione:
-webkit-filtro: invertito (100% ); / * Chrome, Safari, Opera * /
Filtro: invertito (100%);
}
Prova »
Opacità Istanza funzione
grado di conversione della trasparenza dell'immagine:
-webkit-filtro: opacità (30% ); / * Chrome, Safari, Opera * /
Filtro: opacità (30%);
}
Prova »
Saturare istanza Funzione
La conversione della saturazione immagine:
-webkit-filtro: saturare (800% ); / * Chrome, Safari, Opera * /
Filtro: saturare (800%);
}
Prova »
Seppia istanza Funzione
Convertire immagini in seppia:
-webkit-filtro: seppia (100% ); / * Chrome, Safari, Opera * /
Filtro: seppia (100%);
}
Prova »
funzione composta
L'utilizzo di più filtri, ciascun filtro separati da spazi.
Nota: L'ordine è molto importante (per esempio, utilizzando in scala di grigi () prima di usare seppia () produce un'immagine completa scala di grigi).
-webkit-filtro: il contrasto (200% ) luminosità (150%); / * Chrome, Safari, Opera * /
Filtro: contrasto (200%) di luminosità (150%);
}
Prova »
Tutti gli esempi di filtro
L'esempio seguente mostra come utilizzare tutto il filtro:
-webkit-filtro: sfocatura (4px) ;
Filtro: sfocatura (4px);
}
.Brightness {
-webkit-filtro: luminosità (0,30) ;
Filtro: luminosità (0,30);
}
.contrast {
-webkit-filtro: il contrasto (180% );
Filtro: contrasto (180%);
}
.grayscale {
-webkit-filtro: in scala di grigi (100% );
Filtro: in scala di grigi (100%);
}
.huerotate {
-webkit-filtro: tonalità di rotazione ( 180 °);
Filtro: tonalità di rotazione (180 °) ;
}
.invert {
-webkit-filtro: invertito (100% );
Filtro: invertito (100%);
}
.opacity {
-webkit-filtro: opacità (50% );
Filtro: opacità (50%);
}
.saturate {
-webkit-filtro: saturare (7) ;
Filtro: saturare (7);
}
.sepia {
-webkit-filtro: seppia (100% );
Filtro: seppia (100%);
}
.shadow {
-webkit-filtro: drop-ombra ( 8px 8px 10px verde);
Filtro: drop-ombra (8px 8px 10px verde);
}
Prova »
articoli correlati
HTML DOM Riferimento: Stile attribuisce il filtro