CSS 中的 ::backdrop 伪元素用于创建完全覆盖视口的背景，并直接显示在 <dialog> 或进入全屏模式或位于顶层的元素下方或渲染。
在以下场景中可以看到此伪元素的效果：
- 以全屏模式放置的所有元素。
- 在顶层呈现的所有 <dialog> 元素。
- 在顶层呈现的所有弹出框元素。
概述
- 如果将多个元素放置在顶层，则每个元素都有自己的 ::backdrop 伪元素。
- ::backgrounddrop 伪元素具有隐藏、样式化或使所有内容完全隐藏在顶层元素下方的能力。
- ::backdrop 伪元素不能继承自任何其他元素，也不能由任何其他元素继承。
- 对适用于此伪元素的任何或所有属性没有任何限制。
语法
selector::backdrop {
/* ... */
}
CSS ::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>
