CSS - 伪元素 - ::backdrop

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>

打印本页