::backdrop
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
* Some parts of this feature may have varying levels of support.
Das ::backdrop
CSS-Pseudoelement ist eine Box in der Größe des Viewports, die direkt unterhalb eines Elements gerendert wird, das in der Top-Ebene dargestellt wird.
Probieren Sie es aus
Syntax
::backdrop {
/* ... */
}
Beschreibung
Backdrops erscheinen in den folgenden Fällen:
- Elemente, die mit Hilfe der Fullscreen API-Methode
Element.requestFullscreen()
in den Vollbildmodus versetzt wurden. <dialog>
-Elemente, die mit einem Aufruf vonHTMLDialogElement.showModal()
in der Top-Ebene angezeigt werden.- Popover-Elemente, die mit einem Aufruf von
HTMLElement.showPopover()
in der Top-Ebene angezeigt werden.
Wenn mehrere Elemente in die Top-Ebene platziert wurden, besitzt jedes seine eigene ::backdrop
-Pseudoelement.
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
background: rgb(255 0 0 / 25%);
}
Elemente werden in der Top-Ebene als Stapel im Last-In/First-Out (LIFO)-Verfahren angeordnet. Das ::backdrop
-Pseudoelement ermöglicht es, alles unterhalb eines Top-Ebenen-Elements zu verdecken, zu gestalten oder vollständig auszublenden.
Das ::backdrop
-Pseudoelement erbt keine Eigenschaften von anderen Elementen und gibt seine Eigenschaften auch nicht an andere Elemente weiter. Es gibt keine Einschränkungen, welche Eigenschaften auf dieses Pseudoelement angewendet werden können.
Beispiele
Gestaltung des Backdrops eines modalen Dialogs
In diesem Beispiel verwenden wir das ::backdrop
-Pseudoelement, um das Backdrop zu gestalten, das verwendet wird, wenn ein modales <dialog>
geöffnet ist.
HTML
Wir fügen einen <button>
hinzu, der beim Anklicken das enthaltene <dialog>
öffnet. Wenn das <dialog>
geöffnet wird, setzen wir den Fokus auf den Button, mit dem das Dialogfeld geschlossen wird:
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a beautiful backdrop!</p>
</dialog>
<button>Show the dialog</button>
CSS
Wir fügen ein Hintergrundbild für das Backdrop hinzu und erstellen mithilfe der CSS-Gradienten einen bunten Donut:
::backdrop {
background-image:
radial-gradient(
circle,
#fff 0 5vw,
transparent 5vw 20vw,
#fff 20vw 22.5vw,
#eee 22.5vw
),
conic-gradient(
#272b66 0 50grad,
#2d559f 50grad 100grad,
#9ac147 100grad 150grad,
#639b47 150grad 200grad,
#e1e23b 200grad 250grad,
#f7941e 250grad 300grad,
#662a6c 300grad 350grad,
#9a1d34 350grad 400grad,
#43a1cd 100grad 150grad,
#ba3e2e
);
}
JavaScript
Das Dialogfeld wird modal mit der Methode .showModal()
geöffnet und mit der Methode .close()
geschlossen.
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
Ergebnisse
Spezifikationen
Specification |
---|
CSS Positioned Layout Module Level 4 # backdrop |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::backdrop | ||||||||||||
Support on dialog elements | ||||||||||||
Fullscreen support | ||||||||||||
Backdrop elements inherit their values from its originating element | ||||||||||||
Support on popovers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
:fullscreen
-Pseudoklasse<dialog>
HTML-Element- Fullscreen API
popover
HTML-Globalattribut- Popover API