Przykład
Zmienić kolor obrazu do czerni i bieli (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość filtr dodaje efekty wizualne (like blur and saturation) do zdjęć.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Numery obserwowani przez Webkit określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| filter | 18.0 Webkit | 13,0 | 35,0 | 6,0 Webkit | 15,0 Webkit |
Uwaga: Chrome, Safari i Opera wspierać alternatywę, właściwość WebkitFilter.
Składnia
Zwraca właściwość filtra:
object .style.filterUstaw właściwość filtra:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Funkcje filtrów
Uwaga: filtry, które używają wartości procentowe (ie 75%) , a także przyjąć jako wartość dziesiętna (ie 0.75) .
| Filtr | Opis |
|---|---|
| Żaden | Określa żadnych skutków |
| blur( px ) | Dotyczy efekt rozmycia obrazu. Większa wartość stworzy większe rozmycie. Jeśli wartość nie jest określona, 0 jest używany. |
| brightness( % ) | Regulacja jasności obrazu. 0% sprawi, że obraz jest całkowicie czarny. 100% (1) jest domyślnie i przedstawia oryginalny obraz. Wartości powyżej 100% zapewni jaśniejsze rezultaty. |
| contrast( % ) | Reguluje kontrast obrazu. 0% sprawi, że obraz jest całkowicie czarny. 100% (1) jest domyślnie i przedstawia oryginalny obraz. Wartości powyżej 100% zapewni wyniki z mniejszym kontrastem. |
| opadaniem shadow( h-shadow v-shadow blur spread color ) | Dotyczy efektu cienia na obrazie. Możliwe wartości: H-cień - wymagany. Określa się wartości piksela w cieniu poziomej. Wartości ujemne umieścić cień po lewej stronie obrazu. V-cień - wymagany. Określa wartość piksela dla cieniu pionowej. Wartości ujemne umieścić cień nad obrazem. rozmycie - Opcjonalne. Jest to trzecia wartość, i musi być w pikselach. Dodaje efekt rozmycia cienia. Większa wartość tworzy więcej obrazu (cień staje się coraz większa, a jaśniejszy). Wartości ujemne nie są dozwolone. Jeśli wartość nie jest określona, 0 jest używany (EDGE cienia jest ostry). spread - Opcjonalne. Jest to wartość czwartego, i musi być w pikselach. Dodatnie wartości powoduje, że cień rozszerzenia i rosną większe, a wartości ujemne spowoduje cień się kurczyć. Jeśli nie jest określona, to będzie 0 (the shadow will be the same size as the element) . Uwaga: Chrome, Safari i Opera, a może innych przeglądarek nie obsługują tej 4th długość; nie uczyni, jeśli dodany. kolor: opcjonalny. Dodaje kolor cienia. Jeśli nie podano, kolor zależy od przeglądarki (often black) . Porada: Filtr ten jest podobny do box-shadow nieruchomości. |
| grayscale( % ) | Konwertuje obraz do skali szarości. 0% (0) jest domyślnie i przedstawia oryginalny obraz. 100% będzie całkowicie obraz szary (used for black and white images) . Uwaga: Wartości ujemne nie są dozwolone. |
| hue- rotate( deg ) | Stosuje rotację barwy na obrazie. Wartość określa liczbę stopni wokół kole barw obraz próbki zostaną skorygowane. 0deg jest domyślnym i reprezentuje oryginalny obraz. Uwaga: Maksymalna wartość 360deg. |
| invert( % ) | Odwraca próbek w obrazie. 0% (0) jest domyślnie i przedstawia oryginalny obraz. 100% spowoduje, że obraz jest całkowicie odwrócony. Uwaga: Wartości ujemne nie są dozwolone. |
| opacity( % ) | Ustawia poziom nieprzezroczystości dla obrazu. Nieprzezroczystość poziomie określa przezroczystości poziomu, gdzie: 0% jest całkowicie przezroczysta. 100% (1) jest domyślnie i przedstawia oryginalny obraz (no transparency) . Uwaga: Wartości ujemne nie są dozwolone. Porada: Filtr ten jest podobny do krycia nieruchomości. |
| saturate( % ) | Nasyca obraz. 0% (0) spowoduje, że obraz jest całkowicie nie-nasycony. 100% jest domyślnym i reprezentuje oryginalny obraz. Wartości powyżej 100% daje wyniki przesycony. Uwaga: Wartości ujemne nie są dozwolone. |
| sepia( % ) | Konwertuje obraz do sepii. 0% (0) jest domyślnie i przedstawia oryginalny obraz. 100% sprawi, że obraz jest całkowicie sepia. Uwaga: Wartości ujemne nie są dozwolone. |
Szczegóły techniczne
| Wersja CSS | CSS3 |
|---|
Podobne strony
Odniesienie CSS: filter property
<Style obiektu