::backdrop
Stylizuje warstwę tła pod modalnym oknem dialog, elementem pełnoekranowym i otwartym popoverem.
Przykład
#.modal::backdrop {
background: rgb(12 12 16 / 0.6);
backdrop-filter: blur(3px);
}
.modal {
padding: 18px 20px;
border: 1px solid #3f3f46;
border-radius: 14px;
background: #18181b;
color: inherit;
}<style>
.open, .modal button { padding: 8px 14px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer; }
.modal button.ghost { background: #3f3f46; }
</style>
<div style="min-height: 190px;">
<div style="display: flex; gap: 6px; margin-bottom: 12px;"><div class="box">HTML</div><div class="box">CSS</div><div class="box">JS</div></div>
<button class="open" type="button" onclick="this.nextElementSibling.showModal()">Zakończ lekcję</button>
<dialog class="modal">
<p style="margin: 0 0 12px;">Na pewno chcesz zakończyć lekcję?</p>
<form method="dialog" style="display: flex; gap: 8px;">
<button class="ghost">Wróć</button>
<button>Zakończ</button>
</form>
</dialog>
</div>Kliknij „Zakończ lekcję”, żeby otworzyć okno. Zamkniesz je przyciskiem w oknie albo klawiszem Esc.
Definicja i zastosowanie
#Pseudoelement ::backdrop to pełnoekranowa warstwa, którą przeglądarka umieszcza tuż pod elementem wyświetlonym w warstwie wierzchniej (top layer). Pojawia się pod oknem <dialog> otwartym metodą showModal(), pod elementem w trybie pełnoekranowym i pod otwartym popoverem.
Dzięki niemu przyciemnisz albo rozmyjesz stronę pod oknem bez dodawania do HTML żadnej nakładki. Pod oknem dialogowym tło jest domyślnie lekko przyciemnione; zwykle nadaje się mu własny kolor z przezroczystością, a czasem także backdrop-filter: blur().
Okno otwarte metodą show() albo atrybutem open nie jest modalne i nie ma tła. ::backdrop istnieje tylko dla okna otwartego przez showModal(), które blokuje resztę strony i zamyka się klawiszem Esc.
Składnia
#selektor::backdrop { właściwość: wartość; }Typowe style
#- Mocne przyciemnienie strony pod oknem. Kliknij „Otwórz okno”, a zamkniesz je przyciskiem albo klawiszem Esc.
- Półprzezroczysty filtr w kolorze marki zamiast szarości.
- Rozmycie strony pod oknem przez
backdrop-filter. Treść w tle jest widoczna, ale nie rozprasza. - Gradient zamiast jednolitego koloru, np. w barwach marki.
Typowe style w praktyce
#rgb(0 0 0 / 0.7)
.demo::backdrop { background: rgb(0 0 0 / 0.7); }rgb(124 58 237 / 0.45)
.demo::backdrop { background: rgb(124 58 237 / 0.45); }blur(4px)
backdrop-filter. Treść w tle jest widoczna, ale nie rozprasza..demo::backdrop {
background: rgb(0 0 0 / 0.25);
backdrop-filter: blur(4px);
}linear-gradient()
.demo::backdrop {
background: linear-gradient(#7c3aed99, #0ea5e999);
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Okno, które ma być modalne, otwieraj przez
showModal(), a nie atrybutemopen. Tylko wtedy dostaje::backdrop, blokuje resztę strony i zamyka się klawiszem Esc. - Kliknięcie w tło nie zamyka okna samo z siebie. Jeśli tego potrzebujesz, dopisz obsługę w JavaScripcie.
- Płynne pojawianie się tła zrobisz animacją
@keyframesnadaną::backdrop, np. od pełnej przezroczystości do przyciemnienia.
Powiązane hasła
#- backdrop-filterNakłada filtr na to, co widać pod elementem, na przykład rozmycie tła za panelem.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- background-colorUstawia kolor tła elementu.
- z-indexUstala, który element leży wyżej, gdy elementy na siebie nachodzą.
- @keyframesDefiniuje kolejne etapy animacji, czyli klatki kluczowe.
Widzisz błąd albo brakuje przykładu? Napisz do nas.