CSS 中的 ::backdrop 伪元素用于创建完全覆盖视口的背景，并直接显示在 <dialog> 或进入全屏模式或位于顶层的元素下方或渲染。
在以下场景中可以看到此伪元素的效果：
selector::backdrop {
/* ... */
}以下示例显示了 <dialog> 元素上 ::backdrop 伪元素的用法：
<html>
<head>
<style>
dialog::backdrop {
background-image: url("images/border.png");
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #3d3e3e;
color: white;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem;
}
button {
display: inline-block;
border: 1px solid #007bff;
padding: 5px;
font-size: 1rem;
color: black;
background-color: #bfc2c5;
cursor: pointer;
}
@supports not selector(::backdrop) {
body::before {
box-sizing: border-box;
content: '';
}
}
</style>
</head>
<body>
<div class="container">
<p>pseudo-element backdrop used to create a background</p>
<button onclick="openDialog()">Click to Open dialog</button>
<dialog>
<p>See the backdrop</p>
<button onclick="closeDialog()">Close</button>
</dialog>
</div>
<script>
var dialog = document.querySelector('dialog');
function openDialog() {
dialog.showModal();
}
function closeDialog() {
dialog.close();
}
</script>
</body>
</html>
