Exemplu
Modificarea culorii tuturor imaginilor alb - negru (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Sfat: Mai multe "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea de filtrare definește efecte vizuale (like blur and saturation) la un element (often <img>) .
| Valoare implicită: | nici unul |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.WebkitFilter=" grayscale(100%) " Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de -webkit- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15,0 -webkit- |
Notă: mai vechi versiuni de Internet Explorer (4.0 to 8.0) a sprijinit un non-standard de "filter" proprietate care a fost depreciat. Acest lucru a fost folosit mai ales pentru opacitate atunci când este nevoie de sprijin de la IE8 și în jos.
CSS Sintaxa
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Indicație: Pentru a utiliza mai multe filtre, separați fiecare filtru cu un spațiu (See "More Examples" below) A se (See "More Examples" below) .
Funcții de filtrare
Notă: Filtrele care utilizează valori procentuale (ie 75%) , de asemenea , accepta valoarea ca decimal (ie 0.75) .
| Filtru | Descriere | Joaca-l |
|---|---|---|
| none | Valoare implicită. Specifică fără efecte | Joaca - l » |
| blur( px ) | Aplică un efect de estompare a imaginii. O valoare mai mare va crea neclarități. Dacă nu este specificată nici o valoare, 0 este utilizat. | Joaca - l » |
| brightness( % ) | Reglează luminozitatea imaginii. 0% va face imaginea complet negru. 100% (1) este implicit și reprezintă imaginea originală. Valorile de peste 100% vor oferi rezultate mai luminoase. | Joaca - l » |
| contrast( % ) | Reglează contrastul imaginii. 0% va face imaginea complet negru. 100% (1) este implicit și reprezintă imaginea originală. Valorile de peste 100% va furniza rezultate cu un contrast mai puțin. | Joaca - l » |
| drop- shadow( h-shadow v-shadow blur spread color ) | Aplică un efect de scădere umbra imaginii. Valori posibile: h-umbra - obligatorie. Specifică o valoare a pixelilor pentru umbra orizontală. Valorile negative plasează umbra în stânga imaginii. v-umbra - obligatorie. Specifică o valoare a pixelilor pentru umbra pe verticală. Valorile negative plasează umbra deasupra imaginii. blur - Opțional. Aceasta este a treia valoare, și trebuie să fie în pixeli. Adaugă un efect de estompare la umbra. O valoare mai mare va crea mai neclaritate (umbra devine mai mare și mai ușoară). Valorile negative nu sunt permise. Dacă nu este specificată nici o valoare, 0 este utilizat (marginea umbrei este ascuțit). răspândirea - opțional. Aceasta este a patra valoare, și trebuie să fie în pixeli. Valorile pozitive vor provoca umbra să se extindă și să crească mai mari, iar valorile negative vor determina umbra să se micșoreze. Dacă nu este specificat, acesta va fi 0 (the shadow will be the same size as the element) . Notă: Chrome, Safari și Opera, și poate alte browsere, nu acceptă această lungime patra; nu se va face dacă se adaugă. Culoare - Opțional. Adaugă o culoare la umbra. În cazul în care nu este specificat, culoarea depinde de browser (often black) de (often black) . Un exemplu de a crea o umbră roșie, care este 8px mare atât pe orizontală cât și pe verticală, cu un efect de estompare de 10px: Filtru: reînceperea shadow(8px 8px 10px red) ; Sfat: Acest filtru este similar cu caseta-umbra proprietate. | Joaca - l » |
| grayscale( % ) | Convertește imaginea în tonuri de gri. 0% (0) este implicit și reprezintă imaginea originală. 100% va face imaginea complet gri (used for black and white images) - (used for black and white images) . Notă: Valorile negative nu sunt permise. | Joaca - l » |
| hue- rotate( deg ) | Aplică o nuanță de rotație pe imagine. Valoarea definește numărul de grade în jurul cercului de culoare vor fi ajustate în probele de imagine. 0deg este implicit, și reprezintă imaginea originală. Notă: Valoarea maximă este 360deg. | Joaca - l » |
| invert( % ) | Inversează probele din imagine. 0% (0) este implicit și reprezintă imaginea originală. 100% va face imaginea complet inversată. Notă: Valorile negative nu sunt permise. | Joaca - l » |
| opacity( % ) | Setează nivelul de opacitate pentru imagine. De nivel de opacitate descrie nivel de transparență, în cazul în care: 0% este complet transparent. 100% (1) este implicit și reprezintă imaginea originală (no transparency) . Notă: Valorile negative nu sunt permise. Sfat: Acest filtru este similar cu opacitatea proprietății. | Joaca - l » |
| saturate( % ) | Saturează imaginea. 0% (0) va face imaginea complet ne-saturate. 100% este implicit și reprezintă imaginea originală. Valorile de peste 100% ofera super saturate rezultate. Notă: Valorile negative nu sunt permise. | Joaca - l » |
| sepia( % ) | Convertește imaginea în sepia. 0% (0) este implicit și reprezintă imaginea originală. 100% va face imaginea complet sepia. Notă: Valorile negative nu sunt permise. | Joaca - l » |
| url() | url() Funcția ia locația unui fișier XML care specifică un filtru SVG, și poate include o ancoră pentru un element de filtru specific. Exemplu: Filtru: url(svg-url#element-id) - url(svg-url#element-id) | |
| initial | Setează această proprietate la valoarea implicită. Citiți despre inițială | |
| inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Mai multe exemple
Blur Exemplu
Aplicați un efect de estompare imaginii:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
luminozitate Exemplu
Ajustați luminozitatea imaginii:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
contrast Exemplu
Reglați contrastul imaginii:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Drop Shadow Exemplu
Aplicați un efect de scădere umbra imaginii:
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)
Grayscale Exemplu
Conversia imaginii la alb-negru:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue Rotație Exemplu
Aplicați o nuanță de rotație pe imagine:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue- rotate(90deg)
Invert Exemplu
Invert probele din imagine:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Opacitatea Exemplu
Setați nivelul de opacitate pentru imagine:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
saturează Exemplu
Saturează imaginea:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Sepia Exemplu
Conversia imaginii la sepia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Filtre / Combinarea mai multe filtre
Pentru a utiliza mai multe filtre, separați fiecare filtru cu un spațiu.
Notă: Ordinea este importantă (ie using grayscale() de sepia() (ie using grayscale() , (ie using grayscale() de (ie using grayscale() după sepia() va avea ca rezultat o imagine complet gri).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
toate filtrele
O demonstrație a tuturor funcțiilor de filtrare:
.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);
} Încearcă - l singur » Pagini similare
HTML DOM de referință: filter property