CSS
Proprietà filtro
Ricerca…
Sintassi
- filtro: nessuno (valore predefinito)
- filter: initial (predefinito su none);
- filter: inherit (valore predefinito al valore padre);
- filtro: sfocatura (px)
- filtro: luminosità (numero |%)
- filtro: contrasto (numero |%)
- filtro: drop-shadow (orizzontale-ombra-px verticale-ombra-px ombra-sfocatura-px ombra- - colore diffuso)
- filtro: scala di grigi (numero |%)
- filtro: hue-rotate (deg)
- filtro: invert (numero |%)
- filtro: opacità (numero |%)
- filtro: saturare (numero |%)
- filtro: seppia (numero |%)
Parametri
| Valore | Descrizione |
|---|---|
| sfocatura (x) | Sfoca l'immagine di x pixel. |
| luminosità (x) | Illumina l'immagine con qualsiasi valore superiore a 1.0 o 100%. Al di sotto di questo, l'immagine sarà oscurata. |
| contrasto (x) | Fornisce più contrasto all'immagine con qualsiasi valore superiore a 1.0 o 100%. Al di sotto di questo, l'immagine diventerà meno satura. |
| drop-shadow (h, v, x, y, z) | Dà all'immagine un'ombra. he v possono avere valori negativi. x, yez sono opzionali. |
| scala di grigi (x) | Mostra l'immagine in scala di grigi, con un valore massimo di 1.0 o 100%. |
| tonalità rotazione (x) | Applica una rotazione della tonalità all'immagine. |
| invertire (x) | Inverte il colore dell'immagine con un valore massimo di 1.0 o 100%. |
| opacità (x) | Imposta l'opaco / trasparente dell'immagine con un valore massimo di 1.0 o 100%. |
| saturare (x) | Saturizza l'immagine con qualsiasi valore superiore a 1.0 o 100%. Sotto di ciò, l'immagine inizierà a desaturare. |
| seppia (x) | Converte l'immagine in seppia con un valore massimo di 1.0 o 100%. |
Osservazioni
Poiché il filtro è una funzione sperimentale, è necessario utilizzare il prefisso -webkit. Potrebbe cambiare in sintassi e comportamento, ma probabilmente le modifiche saranno ridotte.
Potrebbe non essere supportato nelle versioni precedenti dei principali browser. Potrebbe non essere completamente supportato nei browser per dispositivi mobili.
A causa del suo supporto relativamente limitato, prova a usare
box-shadowanzichéfilter: drop-shadow(). Usa l'opacityinvece delfilter: opacity().Può essere animato tramite Javascript / jQuery. Per Javascript, usa
object.style.WebkitFilter.W3Schools ha anche una pagina demo per tutti i diversi tipi di valori dei filtri.
Ombra esterna (usa invece box-shadow se possibile)
HTML
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Risultato
Più valori di filtro
Per utilizzare più filtri, separare ogni valore con uno spazio.
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Risultato
Tonalità Ruota
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Risultato
Inverti colore
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Risultato
Trasforma da bianco a nero.
blur
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Risultato
Ti fa venire voglia di fregarti gli occhiali.