Przykład
Zmień kolor wszystkich zdjęć do czerni i bieli (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Wskazówka: Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Nieruchomość filtr definiuje efekty wizualne (like blur and saturation) do elementu (often <img>) .
| Domyślna wartość: | Żaden |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby obserwowani przez -webkit- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | 13,0 | 35,0 | 9,1 6,0 -webkit- | 15,0 -webkit- |
UWAGA: Starsze wersje programu Internet Explorer (4.0 to 8.0) obsługiwane niestandardowego "filter" właściwość, która została zaniechana. Było to przede wszystkim wykorzystywane do nieprzejrzystości w razie potrzeby wsparcie IE8 iw dół.
Składnia CSS
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Wskazówka: Aby korzystać z wielu filtrów, filtr oddzielić spacją (See "More Examples" below) .
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 | Graj |
|---|---|---|
| none | Domyślna wartość. Określa żadnych skutków | Graj " |
| blur( px ) | Stosuje efekt rozmycia obrazu. Większa wartość stworzy większe rozmycie. Jeśli wartość nie jest określona, 0 jest używany. | Graj " |
| brightness( % ) | Regulacja jasności obrazu. 0% sprawi, że obraz jest całkowicie czarny. 100% (1) jest domyślny i reprezentuje oryginalny obraz. Wartości powyżej 100% zapewni jaśniejsze rezultaty. | Graj " |
| contrast( % ) | Reguluje kontrast obrazu. 0% sprawi, że obraz jest całkowicie czarny. 100% (1) jest domyślny i reprezentuje oryginalny obraz. Wartości powyżej 100% zapewni wyników z mniejszym kontrastem. | Graj " |
| drop-shadow( h-shadow v-shadow blur spread color ) | Stosuje efekt cienia na obrazie. Możliwe wartości: h-shadow - Wymagany. Określa wartość piksela dla cieniu poziomej. Wartości ujemne umieścić cień po lewej stronie obrazu. v-shadow - 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ść stworzy większe rozmycie (cień staje się większy i jaśniejszy). Wartości ujemne są niedozwolone. Jeśli wartość nie jest określona, 0 jest używany (od krawędzi cienia jest ostry). spread - Opcjonalne. Jest to wartość czwartej, i musi być w pikselach. Wartości dodatnie spowodują cień rozwijać i rozrastać, a wartości ujemne spowodują cień się kurczyć. Jeśli nie podano, 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ści; nie uczyni, jeśli dodany. kolor - Opcjonalne. Dodaje kolor cienia. Jeśli nie podano, kolor zależy od przeglądarki (often black) . Przykładem tworzenia czerwony cień, który jest 8 pikseli duża zarówno poziomo jak i pionowo, z efektu rozmycia z 10px: Filtr: drop-shadow (8 pikseli 8 pikseli 10px czerwony); Porada: Filtr ten jest podobny do box-shadow nieruchomości. | Graj " |
| grayscale( % ) | Konwersja obrazu do skali szarości. 0% (0) jest domyślny i reprezentuje oryginalny obraz. 100% sprawi, że obraz jest całkowicie szarą (used for black and white images) . Uwaga: Wartości ujemne są niedozwolone. | Graj " |
| hue-rotate( deg ) | Stosuje rotację barwy na obrazie. Wartość ta określa liczbę stopni wokół kole barw próbki obrazu zostaną skorygowane. 0deg jest domyślną i stanowi oryginalny obraz. Uwaga: Maksymalna wartość 360deg. | Graj " |
| invert( % ) | Odwraca próbek w obrazie. 0% (0) jest domyślny i reprezentuje oryginalny obraz. 100% sprawi, że obraz jest całkowicie odwrócony. Uwaga: Wartości ujemne są niedozwolone. | Graj " |
| opacity( % ) | Ustawia poziom nieprzezroczystości dla obrazu. Zadymienie poziomu opisuje przezroczystości poziomu, gdzie: 0% jest całkowicie przezroczysty. 100% (1) jest domyślny i reprezentuje obraz oryginalny (no transparency) . Uwaga: Wartości ujemne są niedozwolone. Porada: Filtr ten jest podobny do krycia nieruchomości. | Graj " |
| saturate( % ) | Nasyca obraz. 0% (0) sprawi, że obraz jest całkowicie un-nasycony. 100% jest domyślnym i reprezentuje oryginalny obraz. Wartości powyżej 100% daje wyniki super nasycone. Uwaga: Wartości ujemne są niedozwolone. | Graj " |
| sepia( % ) | Konwertuje obraz do sepii. 0% (0) jest domyślny i reprezentuje oryginalny obraz. 100% sprawi, że obraz jest całkowicie sepii. Uwaga: Wartości ujemne są niedozwolone. | Graj " |
| url() | url() funkcja przyjmuje położenie pliku XML, który określa filtr SVG, i może zawierać kotwicę do określonego elementu filtrującego. Przykład: Filtr: url(svg-url#element-id) | |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
blur Przykład
Zastosowanie efektu rozmycia obrazu:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Jasność Przykład
Regulacja jasności obrazu:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
Kontrast Przykład
Regulacja kontrastu obrazu:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Cień Przykład
Zastosowanie efektu cienia do obrazka:
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)
Przykład skali szarości
Konwersja obrazu do skali szarości:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue Obrót Przykład
Zastosuj obrót barwy na obrazie:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Odwracanie Przykład
Odwrócić próbek na obrazku:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Krycie Przykład
Ustaw poziom krycia dla obrazka:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Nasycenie Przykład
Nasycenia obrazu:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Sepia Przykład
Konwersja obrazu do sepii:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Łączenie wielu filtrów Filtry /
Aby skorzystać z wielu filtrów, filtr oddzielić spacją.
Uwaga: Zamówienie jest ważne (ie using grayscale() po sepia() spowoduje całkowitego obrazu w odcieniach szarości).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
Wszystkie filtry
Wykazanie wszystkich funkcji filtrujących:
.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);
} Spróbuj sam " Podobne strony
Odniesienia HTML DOM: filter property