Il miglior tutorial filtro CSS3 (filtro) proprietà Nel 2024, in questo tutorial puoi imparare Definizioni e uso,Supporto per il browser,CSS Sintassi,funzione di filtro,Altri esempi,articoli correlati,
Modifica tutti i colori alle immagini in bianco e nero (100% grigio):
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 >> |
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à.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Suggerimento: Usa gli spazi per separare più filtri.
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 |
Foto sfocatura gaussiana:
Rendere più luminosa immagine:
Regolare il contrasto dell'immagine:
Impostare un effetto ombra per l'immagine:
Convertire l'immagine in scala di grigi:
Le domande di rotazione tonalità all'immagine:
immagine in ingresso Inversione:
grado di conversione della trasparenza dell'immagine:
La conversione della saturazione immagine:
Convertire immagini in seppia:
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).
L'esempio seguente mostra come utilizzare tutto il filtro:
HTML DOM Riferimento: Stile attribuisce il filtro