Pseudoelemento backdrop

El pseudoelemento backdrop establece la posición del elemento especificado por debajo del primer elemento en el eje Z, pero por encima del resto de elementos. A menudo, este pseudoelemento se utiliza para oscurecer el fondo de la página, en el que se muestran ventanas modales. Hasta la fecha, el pseudoelemento backdrop funciona solo con ventanas modales que se han creado utilizando el elemento <dialog>.

Sintaxis

selector::backdrop {
	background: color para el fondo de la página;
}

Ejemplo

Hagamos que al hacer clic en el botón se abra una ventana modal, y el fondo de la página se oscurezca:

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

Véase también

la propiedad bottom,
que establece la posición del borde inferior del elemento
la propiedad top,
que establece la posición del borde superior del elemento
la propiedad left,
que establece la posición del borde izquierdo del elemento
la propiedad right,
que establece la posición del borde derecho del elemento