Style filter property

Definicja i użycie

filter Dodaj efekty wizualne do obrazu (np. rozmycie i nasycenie).

Zobacz również:

CSS Reference Manual:Właściwość filter

Przykład

Zmień kolor obrazu na czarno-biały (100% szarość):

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

Spróbuj sam

Gramatyka

Zwraca właściwość filter:

object.style.filter

Ustawienie właściwości filter:

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

Funkcja Filtr

Komentarz：Filtr również akceptuje wartości dziesiętne (tj. 0.75) obok wartości procentowych (np. 75%).

Filtr Opis
none Określa brak efektu.
blur(px)

Zastosuj efekt rozmycia do obrazu. Większe wartości powodują większe rozmycie.

Jeśli wartość nie została określona, użycie 0.
brightness(%)

Dostosuj jasność obrazu.

0% sprawi, że obraz całkowicie się zaciemni.

100% (1) to wartość domyślna, oznaczająca oryginalny obraz.

Wartości powyżej 100% dostarczą jaśniejszych wyników.
contrast(%)

Dostosuj kontrast obrazu.

0% sprawi, że obraz całkowicie się zaciemni.

100% (1) to wartość domyślna, oznaczająca oryginalny obraz.

Wartości powyżej 100% dostarczą niższej kontrastu wyniki.
drop-shadow(h-shadow v-shadow blur spread color)

Zastosuj efekt cienia do obrazu.

możliwe wartości：

h-shadow wymagane. Określ wartość pikseli poziomego cienia. Wartość ujemna umieści cień po lewej stronie obrazu.

v-shadow wymagane. Określ wartość pikseli wertykalnego cienia. Wartość ujemna umieści cień nad obrazem.

blur opcjonalnie. Trzeci wymiar, musi być podany w pikselach. Dodaj efekt rozmycia do cienia. Większe wartości spowodują większy i jaśniejszy cień (cień staje się większy i jaśniejszy). Nie dozwolone są wartości ujemne. Jeśli nie określono wartości, użycie 0 (krawędzie cienia będą ostre).

spread opcjonalnie. Czwarty wymiar, musi być podany w pikselach. Wartość dodatnia spowoduje rozszerzenie i powiększenie cienia, wartość ujemna spowoduje jego zmniejszenie. Jeśli nie określono, wyniesie to 0 (cień będzie miał taki sam rozmiar jak element).

Komentarz：Chrome, Safari i Opera, może również inne przeglądarki, nie obsługują czwartego wymiaru; jeśli zostanie dodany, nie zostanie wyświetlony.

coloropcjonalnie. Dodaj kolor do cienia. Jeśli nie określono, kolor zależy od przeglądarki (zwykle czarny).

Wskazówka：Ten filtr jest podobny do atrybutu box-shadow.
grayscale(%)

Przekształć obraz w odcień szarości.

0% (0) to wartość domyślna, oznaczająca oryginalny obraz.

100% sprawi, że obraz całkowicie zmieni się w odcień szarości (dla obrazów czarno-białych).

Komentarz：Nie dozwolone są wartości ujemne.
hue-rotate(deg)

Zastosuj obrót tonacji na obrazie. Ta wartość definiuje, o ile stopni próbki obrazu będą dostosowywane wokół pierścienia kolorów.

0deg to wartość domyślna, oznaczająca oryginalny obraz.

Komentarz：Maksymalna wartość to 360 stopni.
invert(%)

Odwróć próbki w obrazie.

0% (0) to wartość domyślna, oznaczająca oryginalny obraz.

100% sprawi, że obraz całkowicie się odwróci.

Komentarz：Nie dozwolone są wartości ujemne.
opacity(%)

Ustaw poziom nieprzejrzystości obrazu. Poziom nieprzejrzystości opisuje poziom przezroczystości, gdzie:

0% jest całkowicie przezroczysty.

100% (1) to wartość domyślna, oznaczająca oryginalny obraz (bez przezroczystości).

Komentarz：Nie dozwolone są wartości ujemne.

Wskazówka：Ten filtr jest podobny do atrybutu opacity.
saturate(%)

Dostosuj nasycenie obrazu.

0% (0) sprawi, że obraz całkowicie będzie niesaturowany.

100% to wartość domyślna, oznaczająca oryginalny obraz.

Wartości powyżej 100% dostarczą nadmiernie nasyczone wyniki.

Komentarz：Nie dozwolone są wartości ujemne.
sepia(%)

Przekształć obraz w brązowawy.

0% (0) to wartość domyślna, oznaczająca oryginalny obraz.

100% sprawi, że obraz całkowicie będzie brązowawy.

Komentarz：Nie dozwolone są wartości ujemne.

Szczegóły techniczne

Wersja CSS: CSS3

Wsparcie przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0