PricingLoginStart free
CSS Academy · Lekcja

backdrop-filter dla efektu matowego szkła

Nauczy się Pan/Pani tworzyć efekty rozmycia matowego szkła na elementach nałożonych na inną zawartość za pomocą backdrop-filter.

Lekcja 2 z 413 kroki

backdrop-filter dla efektu matowego szkła to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest backdrop-filter?

backdrop-filter stosuje efekty graficzne do obszaru za elementem, a nie do samego elementu. Element musi być częściowo przezroczysty (mieć tło z alfą < 1 lub nie mieć tła), aby odsłonić filtrowane tło znajdujące się za nim.

Efekt matowego szkła

Klasyczny wzorzec matowego szkła:

<div class="bg-wrapper">
  <div class="glass-card">Frosted Glass Card</div>
</div>

Prefiks -webkit-backdrop-filter

Safari wymaga prefiksu -webkit-backdrop-filter. W celu zapewnienia zgodności między przeglądarkami należy zawsze używać go wraz ze standardową właściwością.

Dostępne funkcje filtrów

backdrop-filter obsługuje te same funkcje co filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().

<div class="bg-wrapper">
  <div class="modal-overlay"></div>
</div>

Ciemne matowe szkło

Ciemny wariant do nakładek i okien modalnych:

<div class="bg-wrapper">
  <div class="dark-glass">Dark Frosted Panel</div>
</div>

Wymagania dotyczące kontekstu stosu

backdrop-filter tworzy kontekst stosu. Element musi być kompozytowany nad tłem — oznacza to, że musi znajdować się nad inną zawartością w kolejności stosu (niekoniecznie dzięki z-index, lecz w kolejności malowania).

Wydajność backdrop-filter

Intensywne użycie backdrop-filter: blur() jest kosztowne — wymusza renderowanie tła przez przeglądarkę w osobnym przebiegu. Aby zachować wydajność na urządzeniach mobilnych, należy używać wartości rozmycia nie większych niż 20px. Należy unikać tej właściwości w przypadku zawartości, która jest często malowana ponownie.

Okno modalne z matową nakładką

Okno dialogowe z nakładką imitującą matowe szkło:

<div class="modal-backdrop">
  <div class="modal">Modal Content</div>
</div>

Przyklejana nawigacja ze szkłem

Przyklejany pasek nawigacyjny z efektem matowego szkła:

<div class="bg-wrapper">
  <nav class="navbar">Sticky Nav</nav>
</div>

Obsługa przeglądarek

backdrop-filter jest obsługiwane w przeglądarkach Chrome 76+, Firefox 103+ i Safari 9+ (webkit). Należy zawsze dołączać prefiks -webkit-. Aktualne dane można sprawdzić w serwisie caniuse.com, a w przypadku nieobsługiwanych przeglądarek należy zapewnić nieprzezroczysty wariant awaryjny.

Nieprzezroczysty wariant awaryjny

W przypadku przeglądarek, które nie obsługują backdrop-filter, należy zapewnić nieprzezroczyste tło jako wariant awaryjny:

<div class="bg-wrapper">
  <div class="glass">Fallback-aware glass panel</div>
</div>

Szybkie sprawdzenie

Co musi mieć element, aby backdrop-filter był widoczny?

Odpowiedz w interaktywnej lekcji

Podsumowanie

backdrop-filter stosuje efekty filtrów do tego, co znajduje się za elementem. Element musi być przezroczysty, aby efekt był widoczny. Klasyczny efekt matowego szkła wykorzystuje blur() + saturate(). W przypadku Safari należy zawsze dołączać -webkit-backdrop-filter. Za pomocą @supports należy zapewnić nieprzezroczysty wariant awaryjny.

Bezpłatny start

Ucz się CSS dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
40
Lekcje
159
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „backdrop-filter dla efektu matowego szkła” jest bezpłatna?

Tak — pełny tekst „backdrop-filter dla efektu matowego szkła” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „backdrop-filter dla efektu matowego szkła”?

Nauczy się Pan/Pani tworzyć efekty rozmycia matowego szkła na elementach nałożonych na inną zawartość za pomocą backdrop-filter. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „backdrop-filter dla efektu matowego szkła”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. filter: blur, brightness, contrast, grayscale
  2. backdrop-filter dla efektu matowego szkła
  3. mix-blend-mode do mieszania warstw
  4. Właściwość isolation
← Powrót do CSS Academy