`::backdrop` CSS pseudo-element

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das ::backdrop CSS Pseudoelement ist eine Box in der Größe des Viewports, die direkt unter jedem Element gerendert wird, das in der obersten Ebene präsentiert 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

css

::backdrop {
  /* ... */
}

Beschreibung

Hintergründe erscheinen in den folgenden Fällen:

Elemente, die mit der Methode Element.requestFullscreen() der Fullscreen API in den Vollbildmodus versetzt wurden.
<dialog>-Elemente, die über einen Aufruf von HTMLDialogElement.showModal() in der obersten Ebene angezeigt wurden.
Popover-Elemente, die über einen Aufruf von HTMLElement.showPopover() in der obersten Ebene angezeigt wurden.

Wenn mehrere Elemente in die oberste Ebene gesetzt wurden, hat jedes ein eigenes ::backdrop-Pseudoelement.

css

/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

Elemente werden in einer Last-in/first-out (LIFO) Stapel in die oberste Ebene gesetzt. Das ::backdrop-Pseudoelement ermöglicht es, alles zu verdecken, zu stylen oder vollständig zu verbergen, was sich unter einem Element der obersten Ebene befindet.

::backdrop erbt weder von noch an andere Elemente. Es gibt keine Einschränkungen, welche Eigenschaften auf dieses Pseudoelement angewendet werden können.

Beispiele

Stylen des Hintergrunds eines modalen Dialogs

In diesem Beispiel verwenden wir das ::backdrop-Pseudoelement, um den Hintergrund zu stylen, der verwendet wird, wenn ein modales <dialog> geöffnet ist.

HTML

Wir fügen einen <button> ein, der, wenn er angeklickt wird, das enthaltene <dialog> öffnet. Wenn das <dialog> geöffnet wird, geben wir dem Button, der den Dialog schließt, den Fokus:

html

<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 Hintergrund eine Hintergrundfarbe hinzu und erstellen einen bunten Donut mit CSS-Gradienten:

css

::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 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();
});