::backdrop
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
* Some parts of this feature may have varying levels of support.
Das ::backdrop CSS Pseudoelement ist eine Box in der Größe des Ansichtsfensters, die unmittelbar unter jedem Element gerendert wird, das in der obersten Schicht dargestellt wird.
Probieren Sie es aus
button {
font-size: 1.2rem;
padding: 5px 15px;
}
dialog::backdrop {
background-color: salmon;
}
<button id="showDialogBtn">Show a dialog</button>
<dialog id="favDialog">
<form method="dialog">
<p>The background shown outside of this dialog is a backdrop.</p>
<button id="confirmBtn">Close the dialog</button>
</form>
</dialog>
const showDialogBtn = document.getElementById("showDialogBtn");
const favDialog = document.getElementById("favDialog");
showDialogBtn.addEventListener("click", () => favDialog.showModal());
Syntax
::backdrop {
/* ... */
}
Beschreibung
Backdrops erscheinen in den folgenden Fällen:
- Elemente, die im Vollbildmodus angezeigt werden, indem die Fullscreen API Methode
Element.requestFullscreen()verwendet wird. <dialog>-Elemente, die über einen Aufruf vonHTMLDialogElement.showModal()in der obersten Schicht angezeigt wurden.- Popover-Elemente, die über einen Aufruf von
HTMLElement.showPopover()in der obersten Schicht angezeigt wurden.
Wenn mehrere Elemente in die oberste Schicht gelegt 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 Schicht platziert. Das ::backdrop-Pseudoelement ermöglicht es, alles, was sich unter einem Element der obersten Schicht befindet, zu verdecken, zu stylen oder vollständig auszublenden.
::backdrop erbt weder von anderen Elementen noch wird es von anderen Elementen geerbt. Es gibt keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.
Beispiele
Styling des Backdrops eines modalen Dialogs
In diesem Beispiel verwenden wir das ::backdrop-Pseudoelement, um den Backdrop zu stylen, der verwendet wird, wenn ein modales <dialog> geöffnet ist.
HTML
Wir fügen ein <button> hinzu, das beim Klicken den enthaltenen <dialog> öffnet. Wenn das <dialog> geöffnet ist, fokussieren wir auf 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 dem Backdrop einen Hintergrund hinzu und erstellen mit CSS-Verläufen einen bunten Donut:
::backdrop {
background-image:
radial-gradient(
circle,
white 0 5vw,
transparent 5vw 20vw,
white 20vw 22.5vw,
#eeeeee 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 .showModal()-Methode geöffnet und mit der .close()-Methode 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
Siehe auch
:fullscreenPseudo-Klasse<dialog>HTML-Element- Fullscreen API
popoverglobales HTML-Attribut- Popover API