Twórz tła w stylu systemu operacyjnego za pomocą filtra tła

Rozmycie i zmiana kolorów za elementem.

Adam Argyle
Jan Kowalski
Joe Medley
GitHub
Przejrzystość, rozmycie i inne efekty to przydatne sposoby na uzyskanie głębi, zachowując kontekst treści w tle. Obsługują one różne przypadki użycia, takie jak matowe szkło, nakładki wideo, półprzezroczyste nagłówki nawigacji, nieodpowiednia cenzura obrazów, wczytywanie obrazów itd. Możesz rozpoznawać te efekty z 2 popularnych systemów operacyjnych: Windows 10 i iOS.

Przykład efektu oszronionego szkła.
Przykład efektu oszronionego szkła. Źródło.

Do tej pory techniki te były trudne do wdrożenia w internecie, więc wymagały mniej niż doskonałego hakowania lub obejścia. W ostatnich latach zarówno Safari, jak i Edge oferują te możliwości dzięki właściwości background-filter (lub -webkit-backdrop-filter), która dynamicznie łączy kolory pierwszego planu i tła na podstawie funkcji filtra. Teraz Chrome obsługuje background-filter (od wersji 76).

Demonstracja funkcji filtra backdrop-filter. Wypróbuj przykład na platformie CodePen.

Obsługiwane przeglądarki

Obsługa przeglądarek

  • 76
  • 17
  • 103
  • 9

Źródło

Ze względu na wydajność, jeśli backdrop-filter nie jest obsługiwany, używaj obrazu zamiast kodu polyfill. Widać to w przykładzie poniżej.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Podstawowe informacje

  • Właściwość backdrop-filter stosuje do elementu co najmniej 1 filtr, zmieniając wygląd wszystkich elementów za nim.
  • Element nakładany musi być co najmniej częściowo przezroczysty.
  • Nałożony element otrzyma nowy kontekst.

CSS backdrop-filter stosuje co najmniej 1 efekt do elementu, który jest półprzezroczysty lub przezroczysty. Aby zrozumieć tę kwestię, zapoznaj się z poniższymi obrazami.

Brak przezroczystości pierwszego planu
Trójkąt nałożony na okrąg. Okrąg nie jest widoczny przez trójkąt. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Przejrzystość na pierwszym planie
Trójkąt nałożony na okrąg. Trójkąt jest półprzezroczysty, przez co widać przez niego okrąg. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Obraz po lewej stronie pokazuje, jak zostałyby wyrenderowane nakładające się elementy, gdyby elementy backdrop-filter nie były używane lub obsługiwane. Na obrazie po prawej stronie zastosowano efekt rozmycia: backdrop-filter. Zwróć uwagę, że oprócz backdrop-filter używa uprawnienia opacity. Bez opacity nie byłoby nic do zamazania. Jeśli zasada opacity ma ustawienie 1 (pełne nieprzezroczystość), to tło nie będzie miało żadnego wpływu.

Właściwość backdrop-filter jest jak filtry CSS, ponieważ obsługuje wszystkie Twoje ulubione funkcje filtrowania: blur(), brightness(), contrast(), opacity(), drop-shadow() itd. Obsługuje również funkcję url(), jeśli chcesz użyć jako filtra obrazu zewnętrznego oraz słów kluczowych none, inherit, initial i unset. Wyjaśnienia wszystkich tych kwestii znajdziesz w MDN, w tym opisy składni, filtrów i wartości.

Gdy backdrop-filter ma wartość inną niż none, przeglądarka tworzy nowy kontekst warstwowy. Można też utworzyć blok zawierający, ale tylko wtedy, gdy element ma elementy podrzędne o stałej pozycji i bezwzględnej pozycji.

Możesz łączyć filtry, aby uzyskać bogate i sprytne efekty, lub używać jednego filtra, aby uzyskać bardziej subtelne lub precyzyjne efekty. Możesz nawet łączyć je z filtrami SVG.

Przykłady

Techniki i style projektowania zarezerwowane wcześniej dla systemów operacyjnych są teraz wydajniejsze i możliwe do realizacji za pomocą pojedynczej deklaracji CSS. Przyjrzyjmy się kilku przykładom.

Pojedynczy filtr

W przykładzie poniżej efekt matowej farby jest uzyskiwany przez połączenie koloru i rozmycia. Rozmycie dostarcza backdrop-filter, a kolor pochodzi z półprzezroczystego koloru tła elementu.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
Sprawdź ten przykład w CodePen.

Wiele filtrów

Czasami uzyskanie pożądanego efektu wymaga użycia kilku filtrów. Aby to zrobić, podaj listę filtrów rozdzielonych spacjami. Na przykład:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

W poniższym przykładzie każdy z 4 paneli ma inną kombinację filtrów tła, a za nimi jest animowany ten sam zestaw kształtów.

Sprawdź ten przykład w CodePen.

Nakładki reklamowe

W tym przykładzie pokazujemy, jak rozmyć półprzezroczyste tło, aby tekst był czytelny, a jednocześnie stylistycznie stapia się z tłem strony.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
Wypróbuj ten przykład.

Kontrast tekstu na tłach dynamicznych

Jak już wspomnieliśmy, backdrop-filter umożliwia stosowanie efektywnych efektów, które byłyby trudne lub niemożliwe do wykonania w internecie. Przykładem może być zmiana tła w odpowiedzi na animację. W tym przykładzie backdrop-filter zachowuje wysoki kontrast między tekstem a tłem niezależnie od tego, co dzieje się za tekstem. Zaczyna od domyślnego koloru tła (darkslategray), a następnie za pomocą funkcji backdrop-filter odwraca kolory po przekształceniu.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}
Wykorzystaj ten przykład przygotowany przez Chen Hui Jinga w kategorii Codrops.

Podsumowanie

W ciągu ostatnich kilku lat ponad 560 użytkowników zagłosowało za błędem Chromium, co wyraźnie oznacza, że ta funkcja jest długo oczekiwaną funkcją. Opublikowana w Chrome backdrop-filter w wersji 76 sprawia, że interfejs sieciowy jest o krok bliżej do realistycznego interfejsu użytkownika w systemie operacyjnym.

Dodatkowe zasoby