CSS3 filtrów (filtry) Właściwości
Przykłady
Edycja wszystkich kolorów na czarno-białych zdjęć (100% szary):
-webkit filtr: skala szarości (100% ); / * Chrome, Safari, Opera * /
Filtr: skala szarości (100%);
}
Spróbuj »
Definicje i zastosowanie
atrybut definiuje elementy filtra (zwykle <img>) efekty wizualne (np Fuzzy i nasycenie).
| Domyślnie: | żaden |
|---|---|
| Dziedziczenie: | nie |
| Wsparcie animacji: | Tak. Szczegóły można znaleźć w CSS Animation |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.WebkitFilter = "skala szarości (100%)" , aby spróbować >> |
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji metody.
Natychmiast po numerze dla prefiks wybranej przeglądarki -webkit-.
| nieruchomość | |||||
|---|---|---|---|---|---|
| filtr | 18,0 -webkit- | Nie obsługuje | 35,0 | 6,0 -webkit- | 15,0 -webkit- |
Uwaga: Starsze przeglądarki Internet Explorer (4.0 do 8.0) do obsługi niestandardowych "filter" obiekt został opuszczony. IE8 i starszych przeglądarek często korzystają krycia nieruchomości.
Składnia CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Wskazówka: Użyj spacji aby rozdzielić wiele filtrów.
funkcja filtrowania
Uwaga: Filtry zazwyczaj korzystają z odsetek (np: 75%), oczywiście, może być również używany do reprezentowania po przecinku (np: 0,75).
| filtr | opis |
|---|---|
| żaden | Domyślną wartością, bez efektu. |
| blur (px) | Rozmycie Gaussa do ustawień obrazu. "Promień", aby ustawić wartość standardowa funkcja Gaussa jest słaba, lub liczbę pikseli na ekranie, aby stopić ze sobą, więc tym większa wartość tym bardziej niewyraźne; Jeśli wartość nie jest ustawiona, domyślnie jest 0, parametr ten można ustawić wartość długości css, ale nie może przyjmować wartości procentowe. |
| Jasność (%) | Zastosowanie liniowego mnożenia do obrazu, aby wyglądał jaśniejsze lub ciemniejsze. Jeśli wartość ta wynosi 0%, obraz jest cały czarny. Wartość jest w 100%, bez zmian w obrazie. Inne wartości odpowiadają liniowy efekt mnożnikowy. Wartość ponad 100% są możliwe, że obraz będzie jaśniejszy niż oryginalny. Jeśli wartość nie jest ustawiona, domyślnie jest to 1. |
| kontrastu (%) | Regulacja kontrastu obrazu. Wartość wynosi 0%, obraz jest cały czarny. Wartość 100%, obraz bez zmian. Wartości mogą przekroczyć 100%, co oznacza, że będzie korzystać z niższego kontrastu. Jeśli wartość nie jest ustawiona, domyślnie jest to 1. |
| drop-cień (h-shadow v -shadow rozmycie spread kolor) | Skonfiguruj efekt cienia na obrazie. Cienie są syntetyzowane na obrazku poniżej, nie może być niejednoznaczności, specyficzny kolor może narysować maskę schemacie wersji offsetu. Funkcja akceptuje <shadow> wartość (zdefiniowaną w tle CSS3) rodzaj, oprócz "wstawka" Hasło nie jest dozwolone. Funkcja z istniejącym box-shadow właściwości box-shadow jest bardzo podobna, z tym, że przez filtr, niektóre przeglądarki dla lepszej wydajności zapewnia akcelerację sprzętową.
|
| w skali szarości (%) | Konwersja obrazu do skali szarości. Określa się wartość współczynnika konwersji. Wartość 100% jest całkowicie przekształcony w skali szarości, wartość 0% obrazu niezmienionej. Wartości od 0% do 100%, efekt mnożnikowy jest liniowa. Jeśli nie jest ustawiona wartość domyślna wynosi 0; |
| hue obracania (DEG) | Zastosowanie do obracania obrazu Hue. "Kąt" Kąt Pierścień kolor obrazu jest ustawiona wartość skorygowaną wartość. Wartość 0deg, zmiana obrazu. Jeśli wartość nie jest ustawiona, wartość domyślna to 0deg. Chociaż nie ma maksymalną wartość, która przekracza wartość ekwiwalentu innego 360deg obwodowej. |
| przenoszącego (%) | Odwracanie obrazu wejściowego. Określa się wartość współczynnika konwersji. 100% wartości jest całkowicie odwrócony. Wartość 0%, obraz bez zmian. Wartość od 0% do 100%, efekt mnożnikowy jest liniowa. Jeśli wartość nie jest ustawiona, wartość domyślna to 0. |
| zmętnienie (%) | Stopień konwersji przejrzystości obrazu. Określa się wartość współczynnika konwersji. 0% jest całkowicie przejrzyste, a wartość 100%, obraz niezmienionej. Wartość między 0% a 100%, a efekt jest mnożnik liniowy, pomnożonej przez liczbę próbek jest równoważna obrazu. Jeśli wartość nie jest ustawiona, wartość domyślna to 1. Funkcja ta jest bardzo podobna do istniejącej właściwości nieprzezroczystości, z tym, że przez filtr w celu poprawienia skuteczności niektórych przeglądarek zapewnić przyspieszenie sprzętu. |
| nasycenie (%) | Przekształca nasycenie obrazu. Określa się wartość współczynnika konwersji. 0% jest całkowicie nienasycony, bez zmian w obrazie wynosi 100%. Inne wartości, efekt mnożnikowy jest liniowa. Większa niż 100% wartości są dozwolone, istnieje większe nasycenie. Jeśli wartość nie jest ustawiona, wartość domyślna to 1. |
| Sepia (%) | Konwersja obrazu do sepii. Określa się wartość współczynnika konwersji. Wartość 100% jest całkowicie ciemny brąz, wynosi 0% obrazu niezmienionej. Wartości od 0% do 100%, efekt mnożnikowy jest liniowa. Jeśli nie jest ustawiona wartość domyślna wynosi 0; |
| url () | Funkcja URL pobiera plik XML, który określa filtr SVG, i może zawierać kotwicę na podanie konkretnego elementu filtrującego. Na przykład: filter: url(svg-url#element-id) |
| początkowy | Właściwość jest ustawiona na wartości domyślne, patrz: CSS Keyword Początkowa |
| dziedziczyć | Ta właściwość jest dziedziczona z elementu nadrzędnego, można zobaczyć: CSS do dziedziczenia słowa kluczowego |
Więcej przykładów
Fuzzy przykłady
Zdjęcia rozmycie Gaussa:
-webkit filtr: rozmycie (5px) ; / * Chrome, Safari, Opera * /
Filtr: rozmycie (5px);
}
Spróbuj »
Jasność Funkcja Instance
Dokonać jaśniejszy obraz:
-webkit filtr: jasności (200% ); / * Chrome, Safari, Opera * /
Filtr: jasności (200%);
}
Spróbuj »
Kontrast Funkcja Instance
Regulacja kontrastu obrazu:
-webkit filtr: kontrast (200% ); / * Chrome, Safari, Opera * /
Filtr: kontrast (200%);
}
Spróbuj »
przykłady upuść cienia
Skonfiguruj efekt cienia do obrazka:
-webkit filtr: drop-shadow ( 8 pikseli 8 pikseli 10px red); / * Chrome, Safari, Opera * /
Filtr: drop-shadow (8 pikseli 8 pikseli 10px czerwony);
}
Spróbuj »
Skala szarości Funkcja Instance
Konwersja obrazu do skali szarości:
-webkit filtr: skala szarości (50% ); / * Chrome, Safari, Opera * /
Filtr: skala szarości (50%);
}
Spróbuj »
() Przykłady funkcji hue obracania
Aplikacje rotacji Hue obrazka:
-webkit filtr: hue-rotate ( 90deg); / * Chrome, Safari, Opera * /
Filtr: hue-rotate (90deg) ;
}
Spróbuj »
Odwracanie Funkcja Instance
Odwracanie obrazu wejściowego:
-webkit filtr: inwertowanego (100% ); / * Chrome, Safari, Opera * /
Filtr: inwertowanego (100%);
}
Spróbuj »
Krycie Funkcja Instance
Stopień konwersji przejrzystości obrazu:
-webkit filtr: krycie (30% ); / * Chrome, Safari, Opera * /
Filtr: krycie (30%);
}
Spróbuj »
Nasycać instancję Function
Konwersja nasycenie obrazu:
-webkit filtr: nasycenia (800% ); / * Chrome, Safari, Opera * /
Filtr: nasycenia (800%);
}
Spróbuj »
Sepia Funkcja Instance
Konwersja obrazów do sepii:
-webkit filtr sepia (100% ); / * Chrome, Safari, Opera * /
Filtr sepia (100%);
}
Spróbuj »
funkcja Composite
Zastosowanie wielu filtrów, każdy filtr oddzielone przestrzenie.
Uwaga: Kolejność jest bardzo ważne (na przykład za pomocą skali szarości () przed użyciem (sepia) będzie produkować pełną skalę szarości obrazu).
-webkit filtr: kontrast (200% ), jasność (150%); / * Chrome, Safari, Opera * /
Filtr: kontrast (200%), jasność (150%);
}
Spróbuj »
Wszystkie przykłady filtrów
Poniższy przykład pokazuje, jak używać cały filtr:
-webkit filtr: rozmycie (4px) ;
Filtr: rozmycie (4px);
}
.brightness {
-webkit filtr: jasność (0,30) ;
Filtr: jasność (0,30);
}
.contrast {
-webkit filtr: kontrast (180% );
Filtr: kontrast (180%);
}
.grayscale {
-webkit filtr: skala szarości (100% );
Filtr: skala szarości (100%);
}
.huerotate {
-webkit filtr: hue obracania ( 180 stopni);
Filtr: hue obracania (180 stopni) ;
}
.invert {
-webkit filtr: inwertowanego (100% );
Filtr: inwertowanego (100%);
}
.opacity {
-webkit filtr: krycie (50% );
Filtr: krycie (50%);
}
.saturate {
-webkit filtr: nasycać (7) ;
Filtr: nasycać (7);
}
.sepia {
-webkit filtr sepia (100% );
Filtr sepia (100%);
}
.shadow {
-webkit filtr: drop-shadow ( 8 pikseli 8 pikseli 10px zielony);
Filtr: drop-shadow (8 pikseli 8 pikseli 10px zielony);
}
Spróbuj »
Powiązane artykuły
HTML DOM: Styl atrybuty filtru