1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. ::backdrop

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

::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:

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.

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

Spezifikation
CSS Positioned Layout Module Level 4>
# backdrop>

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden