::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.
Das ::backdrop
CSS Pseudoelement ist ein Kasten in der Größe des Viewports, der sofort unter jedem Element gerendert wird, das in der obersten Ebene präsentiert wird.
Probieren Sie es aus
Syntax
::backdrop {
/* ... */
}
Beschreibung
Backdrops erscheinen in den folgenden Fällen:
- Elemente, die im Vollbildmodus mithilfe der Fullscreen-API Methode
Element.requestFullscreen()
positioniert wurden. <dialog>
-Elemente, die in der obersten Ebene über einen Aufruf vonHTMLDialogElement.showModal()
angezeigt wurden.- Popover-Elemente, die in der obersten Ebene über einen Aufruf von
HTMLElement.showPopover()
angezeigt wurden.
Wenn mehrere Elemente in der obersten Ebene positioniert wurden, hat jedes sein eigenes ::backdrop
-Pseudoelement.
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
background: rgb(255 0 0 / 25%);
}
Elemente werden in einem Last-in/First-out (LIFO)-Stapel in der obersten Ebene angeordnet. Das ::backdrop
-Pseudoelement ermöglicht es, alles, was sich unter einem Element der obersten Ebene befindet, zu verdecken, zu stylen oder vollständig zu verbergen.
Das ::backdrop
-Pseudoelement erbt weder von anderen Elementen, noch vererben andere Elemente Eigenschaften an es. Es gibt keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.
Beispiele
Stylen des Backdrops eines modalen Dialogs
In diesem Beispiel verwenden wir das ::backdrop
-Pseudoelement, um den Backdrop zu gestalten, der verwendet wird, wenn ein modales <dialog>
geöffnet ist.
HTML
Wir fügen einen <button>
ein, der bei einem Klick das enthaltene <dialog>
öffnet. Wenn das <dialog>
geöffnet wird, fokussieren wir den Button, der den Dialog schließt:
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a beautiful backdrop!</p>
</dialog>
<button>Show the dialog</button>
CSS
Wir fügen einen Hintergrund zum Backdrop hinzu und erstellen einen bunten Donut mithilfe von CSS-Verläufen:
::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
Der Dialog 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
BCD tables only load in the browser
Siehe auch
:fullscreen
Pseudoklasse<dialog>
HTML-Element- Fullscreen-API
popover
globales HTML-Attribut- Popover-API