Proprietà CSS filter
La proprietà CSS filter applica effetti grafici alle immagini. Scopri i valori disponibili con esempi illustrati.
La proprietà CSS filter applica effetti grafici—come sfocatura, variazione del colore o ombreggiatura—a un elemento durante il rendering, senza modificare il sorgente sottostante. È più comunemente utilizzata sulle immagini, ma funziona su qualsiasi elemento, inclusi testo, sfondi e SVG.
Questo capitolo descrive ogni funzione di filtro accettata dalla proprietà, come combinare più filtri in un'unica dichiarazione e i casi pratici in cui i filtri superano le alternative.
Quando usare la proprietà filter
Usa filter quando desideri un effetto visivo che il browser calcola dai pixel esistenti dell'elemento:
- Oscurare o tingere un'immagine hero dietro al testo (
brightness,grayscale,sepia) invece di modificare il file in un editor di immagini. - Ammorbidire uno sfondo (
blur) in modo che il contenuto in primo piano rimanga leggibile. - Attirare l'attenzione al passaggio del mouse rimuovendo un filtro grayscale per rivelare i colori originali.
- Aggiungere un'ombra che segue la trasparenza con
drop-shadow—a differenza dibox-shadow, segue la forma interna di un PNG/SVG invece del riquadro rettangolare.
Poiché i filtri vengono eseguiti sulla GPU e influenzano solo la presentazione, si animano in modo fluido e non alterano mai il file sorgente, rendendoli ideali per le transizioni e gli stati hover.
La proprietà filter accetta queste funzioni:
noneblur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | object.style.filter = "hue-rotate(360deg)"; |
Sintassi
Sintassi della proprietà CSS filter
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Esempi
Esempio della proprietà filter con il valore "blur":
Esempio della proprietà CSS filter con il valore blur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "blur(3px)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Risultato
Esempio dell'uso della proprietà filter per rendere l'immagine più luminosa:
Esempio della proprietà CSS filter con il valore brightness
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "brightness(150%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Nell'esempio seguente il valore "grayscale" rende l'immagine in scala di grigi:
Esempio della proprietà filter con il valore "grayscale":
Esempio della proprietà CSS filter con il valore grayscale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "grayscale(80%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Qui viene applicato il filtro "saturate" all'immagine con un valore del 300%.
Esempio della proprietà filter con il valore "saturate":
Esempio della proprietà CSS filter con il valore saturate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "saturate(300%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "sepia":
Esempio della proprietà filter con il valore sepia
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "sepia(70%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "contrast":
Esempio della proprietà CSS filter con il valore contrast
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "contrast(40%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "opacity":
Esempio della proprietà CSS filter con il valore "opacity"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "opacity(0.4)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "invert":
Esempio della proprietà CSS filter con il valore "invert"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "invert(0.7)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "hue-rotate":
Esempio della proprietà CSS filter con il valore "hue-rotate"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "hue-rotate(90deg)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Esempio della proprietà filter con il valore "drop-shadow":
drop-shadow() accetta gli stessi argomenti della proprietà box-shadow—offset-x, offset-y, un raggio di sfocatura opzionale e un colore—ma segue la forma non trasparente dell'immagine invece del suo riquadro di delimitazione. Per questo motivo è la scelta giusta per icone PNG e SVG con trasparenza.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: drop-shadow(8px 8px 10px gray);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "drop-shadow(8px 8px 10px gray)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Combinare più filtri
È possibile applicare più funzioni di filtro in un'unica dichiarazione elencandole, separate da spazi. Vengono applicati nell'ordine in cui sono scritti, quindi il risultato di uno diventa l'input del successivo—cambiare l'ordine può modificare il risultato finale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(100%) brightness(120%) blur(2px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>
This image is first turned to grayscale, then brightened, then blurred.
</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Poiché filter è animabile, abbinarlo a una transizione è un pattern comune—ad esempio, dissolvere una foto in scala di grigi verso il colore pieno al passaggio del mouse:
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}Cose da tenere a mente
- Un filtro crea un contesto di stacking e (con qualsiasi valore diverso da
none) un blocco contenitore per i discendenti—questo può influire sulla disposizione dei figli con posizionamento assoluto efixed. - I valori elevati di
blur()sono costosi. Raggi di sfocatura grandi su elementi di grandi dimensioni possono peggiorare le prestazioni di scorrimento, specialmente sui dispositivi mobili. opacity()vs la proprietàopacity: la funzione filtro applica l'opacità come parte della pipeline dei filtri, mentre la proprietàopacityautonoma è più semplice e leggermente più ampiamente supportata—preferire la proprietà a meno che non la si combini con altri filtri.- Per filtrare ciò che si trova dietro un elemento traslucido (effetto vetro smerigliato) è necessario
backdrop-filter, una proprietà separata—filteragisce solo sui pixel dell'elemento stesso.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| none | Non applica alcun effetto. Questo è il valore predefinito di questa proprietà. | Provalo » |
| blur | Applica la sfocatura a un'immagine. È specificato da un valore di lunghezza. Maggiore è il valore, maggiore sarà la sfocatura applicata. Se non viene specificato alcun valore, viene usato 0. | Provalo » |
| brightness | Rende l'immagine più luminosa. Se il valore è 0 l'immagine sarà nera. Il 100% è il valore predefinito e mostra l'immagine originale. Valori superiori al 100% rendono l'immagine più luminosa. | Provalo » |
| contrast | Regola il contrasto di un'immagine. Se il valore è 0 l'immagine sarà nera. Il 100% è il valore predefinito e mostra l'immagine originale. Valori superiori al 100% applicano maggiore contrasto all'immagine. | Provalo » |
| drop-shadow | Applica un effetto ombra all'immagine. | Provalo » |
| grayscale | Converte l'immagine in scala di grigi. Lo 0% è il valore dell'immagine originale. Il 100% rende l'immagine grigia. I valori negativi non sono consentiti. | Provalo » |
| hue-rotate | Applica un effetto di rotazione della tonalità all'immagine. È specificato in gradi. Il valore massimo è 360 gradi. | Provalo » |
| invert | Inverte i campioni nell'immagine. 0 è il valore predefinito. Il 100% rende l'immagine completamente invertita. | Provalo » |
| opacity | Imposta il livello di opacità per l'immagine. Descrive la trasparenza dell'immagine. Se il valore è 0 l'immagine è completamente trasparente. Il 100% corrisponde allo stato attuale dell'immagine. | Provalo » |
| saturate | Applica l'effetto saturazione all'immagine. Lo 0% rende l'immagine completamente desaturata. Il 100% è il valore predefinito dell'immagine. Valori superiori al 100% rendono l'immagine supersatura. | Provalo » |
| sepia | Converte l'immagine in seppia. Il valore predefinito è 0%, il 100% rende l'immagine completamente seppia. | Provalo » |
| url | La funzione url() riceve la posizione di un file SVG che specifica un filtro, e può includere un'ancora a un elemento filtro specifico. | |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento padre. |