Esempio
Cambiare il colore di tutte le immagini in bianco e nero (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Tip: Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà del filtro definisce effetti visivi (like blur and saturation) ad un elemento (often <img>) .
| Valore di default: | nessuna |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
Supporto per il 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 | 9.1 6.0 -webkit- | 15.0 -webkit- |
Nota: Più versioni di Internet Explorer (4.0 to 8.0) sostenuto una non standard "filter" proprietà che è stata deprecata. Questo è stato in gran parte utilizzato per l'opacità quando necessario il sostegno di IE8 e verso il basso.
CSS Sintassi
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Suggerimento: per utilizzare più filtri, separare ogni filtro con uno spazio (See "More Examples" below) .
Funzioni di filtro
Nota: I filtri che utilizzano valori percentuali (ie 75%) , anche accettare il valore come decimale (ie 0.75) .
| Filtro | Descrizione | Gioca |
|---|---|---|
| none | Valore di default. Specifica nessun effetto | Gioca " |
| blur( px ) | Applica un effetto di sfocatura all'immagine. Un valore maggiore creerà più sfocatura. Se non viene specificato alcun valore, viene utilizzato 0. | Gioca " |
| 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. | Gioca " |
| contrast( % ) | Regola il contrasto dell'immagine. 0% renderà l'immagine completamente nera. 100% (1) è predefinita e rappresenta l'immagine originale. Valori superiori a 100% forniranno risultati con meno contrasto. | Gioca " |
| drop-shadow( h-shadow v-shadow blur spread color ) | Applica un effetto ombra all'immagine. Valori possibili: h-ombra - Richiesto. Specifica un valore di pixel per l'ombra orizzontale. Valori negativi spostano l'ombra a sinistra dell'immagine. v-ombra - Richiesto. Specifica un valore di pixel per l'ombra verticale. Valori negativi collocano l'ombra sopra l'immagine. sfocatura - opzionale. Questo è il terzo valore, e deve essere in pixel. Aggiunge un effetto di sfocatura per l'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 è tagliente). 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 causeranno 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 4a lunghezza; non renderà se aggiunto. colore - opzionale. Aggiunge un colore per l'ombra. Se non specificato, il colore dipende dal browser (often black) . Un esempio di creazione di un'ombra rossa, che è 8px grande sia orizzontalmente che verticalmente, con un effetto di sfocatura di 10px: Filtro: drop-ombra (8px 8px 10px rosso); Suggerimento: Questo filtro è simile al box-shadow di proprietà. | Gioca " |
| grayscale( % ) | Converte l'immagine in scala di grigi. 0% (0) è predefinita e rappresenta l'immagine originale. 100% farà l'immagine completamente grigia (used for black and white images) . Nota: I valori negativi non sono ammessi. | Gioca " |
| hue-rotate( deg ) | Applica una rotazione tonalità sull'immagine. Il valore definisce il numero di gradi intorno al cerchio di colore saranno adeguati i campioni di immagine. 0deg è di default, e rappresenta l'immagine originale. Nota: Il valore massimo è 360deg. | Gioca " |
| invert( % ) | Inverte i campioni nell'immagine. 0% (0) è predefinita e rappresenta l'immagine originale. 100% farà l'immagine completamente capovolto. Nota: I valori negativi non sono ammessi. | Gioca " |
| 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. Tip: Questo filtro è simile alla opacità struttura. | Gioca " |
| saturate( % ) | Satura l'immagine. 0% (0) renderà l'immagine completamente non-saturo. 100% è predefinita e rappresenta l'immagine originale. Valori superiori a 100% fornisce risultati super saturo. Nota: I valori negativi non sono ammessi. | Gioca " |
| sepia( % ) | Converte l'immagine di seppia. 0% (0) è predefinita e rappresenta l'immagine originale. 100% farà l'immagine completamente seppia. Nota: I valori negativi non sono ammessi. | Gioca " |
| url() | L' url() funzione prende la posizione di un file XML che specifica un filtro SVG, e può includere un ancoraggio ad un elemento filtro specifico. Esempio: Filtro: url(svg-url#element-id) | |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
blur Esempio
Applicare un effetto di sfocatura all'immagine:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Luminosità Esempio
Regolare la luminosità dell'immagine:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
contrasto Esempio
Regolare il contrasto dell'immagine:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Ombra Esempio
Applicare un effetto ombra per l'immagine:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Scala di grigi Esempio
Convertire l'immagine in scala di grigi:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue rotazione Esempio
Applicare una rotazione tonalità sull'immagine:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Inverti Esempio
Invertire i campioni nell'immagine:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Opacità Esempio
Impostare il livello di opacità per l'immagine:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Saturate Esempio
Saturare l'immagine:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Seppia Esempio
Convertire l'immagine in seppia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
La combinazione di filtri / Filtri multipli
Per utilizzare filtri multipli, separare ogni filtro con uno spazio.
Nota: L'ordine è importante (ie using grayscale() dopo sepia() si tradurrà in una immagine completamente grigia).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
tutti i filtri
Una dimostrazione di tutte le funzioni di filtro:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Prova tu stesso " Pagine correlate
Di riferimento HTML DOM: filter property