::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 ein Kasten in der Größe des Ansichtsfensters, der unmittelbar unterhalb jedes Elements gerendert wird, das in der oberen Schicht 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

Backdrops erscheinen in den folgenden Fällen:

Wenn mehrere Elemente in die obere Schicht versetzt wurden, hat jedes sein 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 einem Last-in/First-out (LIFO) Stapel in der oberen Schicht platziert. Das ::backdrop Pseudoelement ermöglicht es, alles, was sich unter einem Element der oberen Schicht befindet, zu verdecken, zu stylen oder vollständig zu verbergen.

::backdrop erbt weder von anderen Elementen noch wird es von ihnen geerbt. Es gibt keine Einschränkungen hinsichtlich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.

Beispiele

Styling eines modalen Dialog-Backdrops

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 einen <button> hinzu, der beim Klicken den enthaltenen <dialog> öffnet. Wenn das <dialog> geöffnet wird, fokussieren wir den Button, der den Dialog schließt:

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 Backdrop einen Hintergrund hinzu und erstellen einen farbenfrohen Donut mit CSS-Verläufen:

css
::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 .showModal() Methode geöffnet und mit der .close() Methode geschlossen.

js
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