quiero que detras de un dialog se coloque un fondo opaco, ejemplo, que se vea de color negro con opacidad al 50%, sin embargo, he usado ya backdrop pero no me funciona. A continuacion dejo el codigo css y html, uso el navegador chrome asi que no creo que sea problema de compatibilidad (si necesito colocar los estilos adicionales del dialog me hacen saber, por favor).
HTML
<body>
<dialog open id='dupdate' class='dialogs'>
<img src="./img/checkgreen.webp" width = '120px'>
Datos actualizados correctamente<br>
<button onClick='this.parentElement.close()'> Aceptar </button>
</dialog>
</body>
CSS
dialog::backdrop {
background: black;
}