Ultimele tutoriale de dezvoltare web
 

Style filter Property

<Style Object

Exemplu

Schimbarea culorii unei imagini alb - negru (100% grayscale) de (100% grayscale) :

// Standard syntax
document.getElementById("myImg").style.filter = "grayscale(100%)";

// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Încearcă - l singur »

Definiție și utilizare

Proprietatea de filtrare adaugă efecte vizuale (like blur and saturation) pentru imagini.

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 6.0 Webkit 15,0 Webkit

Notă: Chrome, Safari și Opera susține o alternativă, proprietatea WebkitFilter.

Sintaxă

Întoarcere proprietatea de filtrare:

object .style.filter

Setați proprietatea de filtrare:

object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Funcții de filtrare

Notă: Filtrele care utilizează valori procentuale (ie 75%) , de asemenea , accepta valoarea ca decimal (ie 0.75) .

Filtru Descriere
nici unul Specifică fără efecte
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.
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.
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.
reînceperea 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) .
Sfat: Acest filtru este similar cu caseta-umbra proprietate.
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.
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.
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.
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 opacitate de proprietate.
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.
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.

Detalii tehnice

CSS Versiune CSS3

Pagini similare

Referință CSS: filter property

<Style Object