Pseudo-Element backdrop

Das Pseudo-Element backdrop legt die Positionierung für das angegebene Element unter dem allerersten Element auf der Z-Achse fest, aber über allen anderen Elementen. Oft wird dieses Pseudo-Element zum Abdunkeln des Seitenhintergrunds verwendet, auf dem modale Fenster angezeigt werden. Bis heute funktioniert das Pseudo-Element backdrop nur mit modalen Fenstern, die mit dem Element <dialog> erstellt wurden.

Syntax

Selektor::backdrop {
	background: Hintergrundfarbe für die Seite;
}

Beispiel

Lassen Sie uns einen Klick auf den Button so einrichten, dass ein modales Fenster geöffnet wird und der Seitenhintergrund dabei abgedunkelt wird:

<button id="open">Open</button>
<dialog>
	<form method="dialog">
		<p>Text text text</p>
		<button id="close">Close</button>
	</form>
</dialog>

body{
	height: 200px;
}
dialog {
	width: 200px;
}
dialog::backdrop {
	background-color: grey;
}

let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Siehe auch

die Eigenschaft bottom,
die die Position der Unterkante des Elements festlegt
die Eigenschaft top,
die die Position der Oberkante des Elements festlegt
die Eigenschaft left,
die die Position der linken Kante des Elements festlegt
die Eigenschaft right,
die die Position der rechten Kante des Elements festlegt