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

rozmycie i zmiana koloru za elementem.

Adam Argyle

Joe Medley

W przeszłości te techniki były trudne do wdrożenia w internecie, ponieważ wymagały stosowania niezbyt skutecznych obejść lub obejść. W ostatnich latach zarówno Safari, jak i Edge oferowały te funkcje za pomocą właściwości background-filter (lub opcjonalnie -webkit-backdrop-filter), która dynamicznie miesza kolory pierwszego planu i tła na podstawie funkcji filtra. Chrome obsługuje teraz background-filter od wersji 76.

Obsługa przeglądarek

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 co najmniej 1 filtr do elementu, zmieniając wygląd wszystkiego, co znajduje się za tym elementem.
• Element nakładany musi być co najmniej 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ć, spójrz na poniższe obrazy.

Brak przezroczystości pierwszego planu

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Przezroczystość pierwszego planu

.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 zawiera efekt rozmycia za pomocą narzędzia backdrop-filter. Zwróć uwagę, że oprócz backdrop-filter używa ona także backdrop-filter. Bez funkcji opacity nie byłoby można zamazać obrazu. Nie trzeba chyba dodawać, że jeśli parametr opacity ma wartość 1 (pełna przezroczystość), tło nie będzie miało żadnego wpływu.

Właściwość backdrop-filter jest podobna do filtrów CSS, ponieważ obsługiwane są wszystkie Twoje ulubione funkcje filtrów: blur(), brightness(), contrast(), opacity(), drop-shadow() itd. Obsługuje też funkcję url(), jeśli chcesz użyć zewnętrznego obrazu jako filtra, a także słowa kluczowe none, inherit, initial i unset. Wszystkie te kwestie są opisane na stronie MDN, m.in. składnia, filtry i wartości.

Jeśli wartość parametru backdrop-filter jest inna niż none, przeglądarka tworzy nowy kontekst z nakładaniem. 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 fantazyjny efekt, albo użyć jednego filtra, aby uzyskać bardziej subtelne lub precyzyjne efekty. Możesz je nawet łączyć z filtrami SVG.

Przykłady

Techniki i style projektowania, które wcześniej były zarezerwowane dla systemów operacyjnych, są teraz wydajne i dostępne za pomocą pojedynczej deklaracji CSS. Przyjrzyjmy się kilku przykładom.

Jeden filtr

W tym przykładzie efekt przymrozków uzyskuje się przez połączenie koloru i rozmycia. Rozmycie jest podawane przez 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);
}

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.

Nakładki

Ten przykład pokazuje, jak rozmyć półprzezroczyste tło, aby tekst był czytelny, a jednocześnie stylistycznie dopasowany do tła strony.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Kontrast tekstu na dynamicznych tłach

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 reakcji 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;
}

Podsumowanie

W ciągu ostatnich kilku lat ponad 560 z Was zagłosowało na błąd w Chromium, wyraźnie wskazując, że jest to długo oczekiwana funkcja CSS. Opublikowana w Chrome wersja backdrop-filter w wersji 76 przybliża internet do prezentacji interfejsu i odzwierciedlenia jej systemu operacyjnego.

Dodatkowe materiały

• Specyfikacja
• Stan platformy Chrome
• MDN
• background-filter na stronie CSS Tricks
• Przykłady na Codepen