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

Rozmycie i zmiana kolorów za elementem.

Adam Argyle
Joe Medley
Joe Medley
GitHub
Przejrzystość, rozmycie i inne efekty to przydatne sposoby na dodanie głębi przy jednoczesnym zachowaniu kontekstu zawartości tła. Obsługują wiele zastosowań, takich jak oszronione szkło, nakładki wideo, półprzezroczyste nagłówki nawigacyjne, nieodpowiednia cenzurowanie obrazów, wczytywanie obrazów itd. Być może rozpoznajesz te zmiany w 2 popularnych systemach operacyjnych: Windows 10 oraz iOS.

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

W przeszłości te techniki były trudne do wdrożenia w internecie i wymagały mniej niż doskonałych sposobów hakowania lub obejścia problemów. W ostatnich latach Safari i Edge zapewniały te możliwości dzięki właściwości background-filter (oraz -webkit-backdrop-filter), która dynamicznie łączy kolory pierwszego planu i tła na podstawie funkcji filtra. Chrome obsługuje teraz background-filter od wersji 76.

Demonstracja funkcji filtrów dla backdrop-filter. Skorzystaj z przykładu na CodePen.

Obsługiwane przeglądarki

Obsługa przeglądarek

  • 76
  • 79
  • 103
  • 9

Źródło

Ze względu na wydajność, jeśli obiekt backdrop-filter nie jest obsługiwany, zamiast kodu polyfill użyj 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.
  • Nakładany element musi być przynajmniej częściowo przezroczysty.
  • Nakładający się element otrzyma nowy kontekst grupowania.

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

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

Obraz po lewej stronie pokazuje, jak nakładające się elementy zostałyby wyrenderowane, gdyby backdrop-filter nie był używany lub obsługiwany. Obraz po prawej stronie stosuje efekt rozmycia za pomocą funkcji backdrop-filter. Zwróć uwagę, że oprócz backdrop-filter używany jest także atrybut opacity. Bez funkcji opacity nie byłoby można zamazać. Jest niemal oczywiste, że jeśli opacity ma wartość 1 (całkowicie nieprzezroczysty), nie ma to żadnego wpływu na tło.

Właściwość backdrop-filter działa podobnie do filtrów CSS, ponieważ obsługiwane są wszystkie Twoje ulubione funkcje filtrów: blur(), brightness(), contrast(), opacity(), drop-shadow() itd. Jeśli jako filtr chcesz użyć obrazu zewnętrznego, a także ze słów kluczowych none, inherit, initial i unset, funkcja ta obsługuje również funkcję url(). Wszystkie te informacje znajdziesz w MDN, w tym opisy składni, filtrów i wartości.

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

Możesz łączyć filtry, aby uzyskać bogaty i inteligentny efekt, albo użyć jednego filtra, aby uzyskać bardziej subtelne lub precyzyjne efekty. Możesz je nawet łączyć z filtrami SVG.

Przykłady

Techniki projektowe i style zarezerwowane wcześniej dla systemów operacyjnych są teraz wydajne i możliwe do osiągnięcia dzięki pojedynczej deklaracji CSS. Przyjrzyjmy się kilku przykładom.

Jeden filtr

W przykładzie poniżej efekt matowy jest osiągany przez połączenie koloru i rozmycia. Za rozmycie odpowiada firma backdrop-filter, a kolor pochodzi z półprzezroczystego tła elementu.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
Wypróbuj ten przykład samodzielnie w kodzie CodePen.

Wiele filtrów

Czasami do uzyskania pożądanego efektu potrzebujesz kilku filtrów. Aby to zrobić, podaj listę filtrów oddzielonych 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 zawiera inną kombinację filtrów tła, a za nimi animowany jest ten sam zestaw kształtów.

Wypróbuj ten przykład samodzielnie w CodePen.

Nakładki reklamowe

Ten przykład pokazuje, jak rozmyć półprzezroczyste tło, aby tekst był czytelny, a jednocześnie stylowo wtapiała się w tło strony.

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

Kontrast tekstu na dynamicznym tle

Jak wspomnieliśmy wcześniej, backdrop-filter umożliwia skuteczne efekty, które byłyby trudne lub niemożliwe 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 jego tłem niezależnie od tego, co dzieje się za tekstem. Zaczyna się od domyślnego koloru tła (darkslategray) i używa backdrop-filter do odwrócenia kolorów po przekształceniu.

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

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}
Wypróbuj ten przykład z serii Chen Hui Jing w filmie 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 CSS jest długo oczekiwana. Opublikowana w Chrome w wersji 76 wersja backdrop-filter przybliża internet do prezentacji interfejsu i podobania do systemu operacyjnego.

Dodatkowe materiały