backdrop-filter
Nakłada filtr na to, co widać pod elementem, na przykład rozmycie tła za panelem.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako lista funkcji filtrów
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backdropFilter = "blur(12px)"
Przykład
#.header {
position: sticky;
top: 0;
background: rgb(10 10 10 / 0.6);
backdrop-filter: blur(12px);
}<div style="height: 170px; overflow: auto; border-radius: 12px; background: url('/collections/covers/kurs-html-css-od-podstaw.webp') center top / cover;">
<div style="position: sticky; top: 0; padding: 12px 16px; background: rgb(10 10 10 / .55); backdrop-filter: blur(12px);">Nagłówek ze szklanym efektem</div>
<div style="height: 300px;"></div>
</div>Definicja i zastosowanie
#Właściwość backdrop-filter działa jak filter, ale nie na sam element, tylko na obszar strony widoczny przez niego. Najpopularniejszy efekt to „szkło”: półprzezroczysty panel z rozmytym tłem pod spodem.
Żeby efekt był widoczny, element musi mieć tło przynajmniej częściowo przezroczyste, na przykład background: rgb(0 0 0 / 0.4). Pełne, nieprzezroczyste tło zasłoni filtr.
Rozmycie tła jest kosztowne obliczeniowo. Na słabszych urządzeniach duże panele z backdrop-filter mogą spowalniać przewijanie, więc stosuj go do niewielkich elementów, jak nagłówki i okienka.
Składnia
#backdrop-filter: none | <funkcja filtra>+;Wartości
#- Tło pod panelem jest ostre.
- Efekt matowego szkła.
- Tło pod panelem w odcieniach szarości.
kilka funkcji
Rozmycie z podbitymi kolorami, jak w interfejsach systemowych.
Wartości w praktyce
#none
.demo { backdrop-filter: none; }blur(10px)
.demo { backdrop-filter: blur(10px); }grayscale(1)
.demo { backdrop-filter: grayscale(1); }blur(8px) saturate(1.8)
.demo { backdrop-filter: blur(8px) saturate(1.8); }Obsługa przeglądarek
#Nowość w przeglądarkach · od 2024 roku
Działa w aktualnych wersjach wszystkich głównych przeglądarek. Starsze wersje mogą tego nie obsługiwać.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Bez półprzezroczystego tła efekt nie będzie widoczny. Zacznij od koloru z przezroczystością 40–70%.
- Starsze wersje Safari wymagały przedrostka
-webkit-backdrop-filter.
Powiązane hasła
#- filterNakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- background-colorUstawia kolor tła elementu.
- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.