filter
Nakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako lista funkcji filtrów
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.filter = "grayscale(1)"
Przykład
#.logos img {
filter: grayscale(1) brightness(1.6);
opacity: 0.7;
transition: filter 0.2s, opacity 0.2s;
}
.logos img:hover {
filter: none;
opacity: 1;
}<div style="display: flex; gap: 16px; align-items: center;">
<img src="/collections/nextjs.png" alt="" width="48" height="48" style="filter: grayscale(1) brightness(1.6); opacity: .7;">
<img src="/collections/supabase.png" alt="" width="48" height="48" style="filter: grayscale(1) brightness(1.6); opacity: .7;">
<img src="/collections/vercel.png" alt="" width="48" height="48">
</div>Definicja i zastosowanie
#Właściwość filter przetwarza wygląd elementu tak, jak robią to programy graficzne. Masz do dyspozycji funkcje blur(), brightness(), contrast(), grayscale(), sepia(), saturate(), hue-rotate(), invert(), opacity() i drop-shadow().
Funkcje można łączyć w jednej deklaracji, na przykład grayscale(1) contrast(1.2). Stosuje się je po kolei, od lewej do prawej.
Filtr działa na cały element razem z dziećmi. drop-shadow() różni się od box-shadow tym, że podąża za kształtem przezroczystego obrazu, na przykład logo w PNG, a nie za prostokątem elementu.
Składnia
#filter: none | <funkcja filtra>+;Wartości
#- Obraz bez zmian.
- Rozmycie o promieniu 4px.
- Pełna skala szarości.
- Rozjaśnienie o 40%.
- Przesunięcie wszystkich barw na kole kolorów.
kilka funkcji
Efekt starej fotografii z podbitym kontrastem.
Wartości w praktyce
#none
.demo { filter: none; }blur(4px)
.demo { filter: blur(4px); }grayscale(1)
.demo { filter: grayscale(1); }brightness(1.4)
.demo { filter: brightness(1.4); }hue-rotate(120deg)
.demo { filter: hue-rotate(120deg); }sepia(1) contrast(1.2)
.demo { filter: sepia(1) contrast(1.2); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Szare logotypy partnerów, które odzyskują kolor po najechaniu, to klasyczne użycie
filter: grayscale(1). - Do rozmycia tła za elementem, a nie samego elementu, służy
backdrop-filter.
Powiązane hasła
#- backdrop-filterNakłada filtr na to, co widać pod elementem, na przykład rozmycie tła za panelem.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- mix-blend-modeUstala, jak kolory elementu mieszają się z tym, co leży pod nim.
- box-shadowDodaje cień wokół elementu, na zewnątrz lub do środka.
Widzisz błąd albo brakuje przykładu? Napisz do nas.